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:
To create a solid border we add the class border-solid to it
To create a border in the top, we add the class border-top
to it
To create a border in the bottom, we add the class border-btm
to it
To create a border in the right, we add the class border-right
to it
To create a border in the left, we add the class border-left
to it
Let's create a border top and bottom
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.
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"
You can also add border radius using the round-{num}
class, where num
is an even number and not greater than 10.
<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>