Borders

What is a border?
A border property allows you to specify how the border of the box representing an element should look like. With Stylet you can add colors to a border, and define the radius of the border

To create a border we add the class border to it:

i have a border

To create a solid border we add the class border-solid to it

i have a border

To create a border in the top, we add the class border-top to it

i have a border

To create a border in the bottom, we add the class border-btm to it

i have a border

To create a border in the right, we add the class border-right to it

i have a border

To create a border in the left, we add the class border-left to it

i have a border

Let's create a border top and bottom

i have a border

Adding colors to the border is simple, using the syntax border-{stylet's_color}
The border color allows us to change the color of the border surrounding an element. You can change the border color of bottom, left, top, right and the whole border itself.

Hello i have a purple border color

Hello i have a solid purple border color

Hello i have a royal blue border color to my right

Hello i have a gold border color to my left

Hello i have a red border color at the top

Hello i have an orange border color at the bottom

You can also add border radius to a border, in stylet there are three types of border radius class. "round-border", "rounder-border" and "roundest-border"

i have a border radius of 0.25rem(round-border)

i have a border radius of 1rem(rounder-border)

i have a border radius of 1.5rem (roundest-border)

You can also add border radius using the round-{num} class, where num is an even number and not greater than 10.

i have a border radius of 2rem(round-2)
<div class="border pad-3 lavenderblush-bg">
I have a border
</border>
<div class="border-solid border-purple pad-3 lavenderblush-bg">
I have a solid purple border
</div>

<div class="border-right pad-3 lavenderblush-bg">
I have a border to my right
</div>

<div class="border-left pad-3 lavenderblush-bg">
I have a border to my left
</div>
<div class="border-top pad-3 lavenderblush-bg">
I have a border to the top
</div>
<div class="border-btm pad-3 lavenderblush-bg">
I have a border to the btm
</div>