Borders allow us to define the style, width, and color of an element, properties that determine the boundary of
elements. Four values are allowed, specifying the top, bottom, right, and left borders. In practice, this is the
border around the HTML element. The border-style property has four values: solid, dashed, dotted, and
double, meaning the top border will be solid, the bottom double, the right dashed, and the left dotted. If a border
has two or three values, we specify one or more values using properties like border-top-style: solid,
border-bottom-style: solid, and so on.
| Property | Example | Description |
|---|---|---|
| Basic Properties | ||
border | border: 2px solid red; |
Shorthand property to set width, style, and color at once |
border-width | border-width: 2px; |
Sets the width of all four borders (top, right, bottom, left) |
border-style | border-style: solid; |
Sets the style of the border (solid, dashed, dotted, double, groove, ridge, inset, outset, none, hidden) |
border-color | border-color: red; |
Sets the color of all four borders |
| Individual Sides (Top, Right, Bottom, Left) | ||
border-top | border-top: 1px solid black; |
Sets the top border (width, style, color) |
border-right | border-right: 2px dashed blue; |
Sets the right border |
border-bottom | border-bottom: 3px dotted green; |
Sets the bottom border |
border-left | border-left: 1px solid red; |
Sets the left border |
| Individual Properties per Side | ||
border-top-width | border-top-width: 2px; |
Width of the top border only |
border-top-style | border-top-style: dashed; |
Style of the top border only |
border-top-color | border-top-color: red; |
Color of the top border only |
| Rounded Corners | ||
border-radius | border-radius: 10px; |
Rounds all four corners |
border-top-left-radius | border-top-left-radius: 5px; |
Rounds the top-left corner |
border-top-right-radius | border-top-right-radius: 5px; |
Rounds the top-right corner |
border-bottom-left-radius | border-bottom-left-radius: 5px; |
Rounds the bottom-left corner |
border-bottom-right-radius | border-bottom-right-radius: 5px; |
Rounds the bottom-right corner |
| Other | ||
outline | outline: 2px solid red; |
Border outside the element border (does not affect layout) |
outline-offset | outline-offset: 4px; |
Space between the outline and the border |
