Author: Michal Szymanski
CSS Border Properties
The CSS border properties allow you to specify the style, width, and
color of an element's border.
.example-1 {
border: 1px solid black;
}
.example-2 {
border-bottom: 1px solid blue;
}
.example-3 {
border: 1px solid grey;
border-radius: 15px;
}
.example-4 {
border-left: 5px solid purple;
}
<p class="example-1">I have black borders on all sides.</p>
<p class="example-2">I have a blue bottom border.</p>
<p class="example-3">I have rounded grey borders.</p>
<p class="example-4">I have a purple left border.</p>
I have black borders on all sides.
I have a blue bottom border.
I have rounded grey borders.
I have a purple left border.
From the examples above you have seen that it is possible to specify a different border for each side.
In CSS, there are also properties for specifying each of the borders (top, right, bottom, and left):
.example-5 {
border-top: 3px solid blue;;
border-right: 3px solid red;;
border-bottom: 3px solid green;;
border-left: 3px solid orange;;
}
<p class="example-5">I have a different borders on each side.</p>
Live preview
I have a different borders on each side.
Previous lesson Next lesson
Spread the word:
