DnnContra borders

Using borders in the dnncontra theme

Built into the DnnContra theme there are many css classes that make it easy to change the way the theme looks. One of these classes is allow you to add borders to divs.

Here is what you can do with borders in the theme and how it do it:

 
 
 
 
 
 

    
<div class="row">
<div class="col-md-12">
<div class="teal lighten-5 border-all blue-border border-width-1"></div>
</div>
<div class="col-md-12">
<div class="teal lighten-5 border-l blue-border border-width-1"></div>
</div>
<div class="col-md-12">
<div class="teal lighten-5 border-t blue-border border-width-1"></div>
</div>
<div class="col-md-12">
<div class="teal lighten-5 border-r blue-border border-width-1"></div>
</div>
<div class="col-md-12">
<div class="teal lighten-5 border-b blue-border border-width-1"></div>
</div>
<div class="col-md-12">
<div class="teal lighten-5 border-t-l-r blue-border border-width-2"></div>
</div>
</div>

The border have allot of classes you can use to display the right combination that you are looking for. This includes the border color, border width and color. Below you can find the various classes that you can use to display a border easily:

Border placement

Class name Description
border-all Displays all borders (top, left, right and bottom)
border-t Display only the top border
border-b Display only the bottom border
border-l Display only the left border
border-r Display only the right border
border-t-b Display only the top and bottom border
border-l-r Display only the lwft and right border
border-t-l Display only the top and left border
border-t-r Display only the top and right border
border-b-l Display only the bottom and left border
border-b-r Display only the bottom and right border
border-t-l-r Display only the top, left and right border
border-b-l-r Display only the bottom, left and right border
border-t-b-l Display only the top, bottom and left border
border-t-b-r Display only the top, bottom and right border

Border width

Class name Description
border-width-0 Displays no border
border-width-1 Displays a border with a width of 1px
border-width-2 Displays a border with a width of 2px
border-width-3 Displays a border with a width of 3px
border-width-4 Displays a border with a width of 4px
border-width-5 Displays a border with a width of 5px

Border radius

Class name Description
border-radius-1 Displays a border radius of 1px
border-radius-2 Displays a border radius of 2px
border-radius-3 Displays a border radius of 3px
border-radius-4 Displays a border radius of 4px
border-radius-5 Displays a border radius of 5px
border-radius-6 Displays a border radius of 6px
border-radius-7 Displays a border radius of 7px
border-radius-8 Displays a border radius of 8px
border-radius-9 Displays a border radius of 9px
border-radius-10 Displays a border radius of 10px

Coloring the borders

To color the border you use the border color class. You would use this class like the text color class: {colorname}-border, so if you want a red border you would use red-border. This way you can color the border with all colors available in the DnnContra Color palette.