Author: Michal Szymanski
Free live lesson
Learn HTML, CSS & JavaScript fundamentals. Join now, and don't miss the livestream.
JOIN NOWCSS 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:
