#Borders

Playing with borders

You can decorate with border practically any component using the be-bdr-* family of classes.The default value is 0.5 pixels.

Border positions

<div class="be-bdr-top">...</div>
<div class="be-bdr-left">...</div>
<div class="be-bdr-bottom">...</div>
<div class="be-bdr-right">...</div>
<div class="be-bdr">...</div> <!-- for all side-->

Borders thickness

<div class="be-bdr be-bdr-1">be-bdr<br>be-bdr-1</div>
<div class="be-bdr-left be-bdr-2">be-bdr-left<br>be-bdr-2</div>

<!-- Thickness borders classes
     numbers are pixels  -->
.be-bdr-1
.be-bdr-2
.be-bdr-3
.be-bdr-4
.be-bdr-5

Borders with brand colors

The colors of the Brand Color Scheme can be used to apply colors to the borders.

<div class="be-bdr-top be-bdr-5 be-bdr-brand-color"><p>be-bdr-brand-color</p></div>

Note that the text contains the p tag, otherwise it would also assume the border color.

Please go to the Colors section if you want to see the complete classes list.

Overriding borders

When you use the class be-bdr-var you have four variables available that you can use to stylize either side and change thickness, style and color.

<!-- variables for be-bdr-var -->
--bdr-top
--bdr-bottom
--bdr-left
--bdr-right

<div class="be-bdr-var" style="--bdr-left: 3px solid var(--sun-flower)">Text here</div>
<div class="be-bdr-var" style="--bdr-top: 5px solid orange">Text here</div>
<div class="be-bdr-var" style="--bdr-bottom: 15px  dotted black">Text here</div>

For the full boiler you can use the be-bdr class in its variable version.

Also, without resorting to variables, you can change the thickness from 1 to 5 pixels, and add any brand color, simply by using classes.

    <div class="be-bdr-bottom be-bdr-4 be-bdr-brand-color"><p>...</p> </div>
    <div class="be-bdr-top be-bdr-5 be-bdr-dark-accent"><p>...</p></div>

Border Styles

<button class="be-btn be-bdr-dotted">Dotted Border</button>
<button class="be-btn be-bdr-dashed">Dashed Border</button>

Dotted Border Dashed Border

<button class="be-btn be-bdr-dotted be-bdr-4 be-bdr-brand-color">Dotted Border</button>
<button class="be-btn be-bdr-dashed be-bdr-4 be-bdr-brand-color">Dotted Border</button>

Dotted Border Dotted Border