CSS Borders
The CSS border properties allow you to specify the style, width, and color of an element's border.
Table of Contents
The CSS border property lets you draw a line around any element. You can control the style, width, color, and even rounded corners.
Try It — All Border Types
Preview
Border Shorthand
Instead of writing three separate properties, use the shorthand:
/* border: width style color; */
border: 2px solid red;
Border Properties Reference
| Property | Values | Example |
|---|---|---|
border-style | solid, dashed, dotted, double, none | border-style: dashed |
border-width | px, em, thin, medium, thick | border-width: 3px |
border-color | any color | border-color: red |
border-radius | px or % | border-radius: 8px |
Tip:
border-radius: 50%on an element with equal width and height makes a perfect circle!