Borders
Explore how CSS borders work by learning to set border width style and color. Understand applying borders to specific sides and using shorthand properties to efficiently style elements in web design.
The border property
The border surrounds an element between the padding and margin. We can use it to draw an edge around an element. We use the border-width, border-style, and border-color properties to define our border.
Border width
The border-width property defines the border’s thickness.
p {
border-width: 2px;
}
Alternatively, we could set each edge (top -> right -> bottom -> left) separately, like so:
p {
border-width: 2px 1px 2px 1px;
}
We can also use the following values:
- The
thinvalue is1px - The
mediumvalue is3px - The
thickvalue is5px
We can ...