Border
Add visible edges around your elements.
Step 1 of 3
Border: the visible edge
The border is the one box model layer you can actually see. It wraps around the padding and gives elements a visible frame — like the outline around input fields on Google's login form, or the subtle lines separating cards on Instagram.
In CSS, borders have three properties: width (thickness), style (solid, dashed, etc.), and color. In our visualization, the border is the yellow layer.
Think of it this way: The border is the actual wall of the box. Padding is the foam inside, and the border is the cardboard itself.
Web Standard
Borders have three properties: width, style, and color. The border shorthand sets all three at once (e.g., border: 2px solid #333). Without a style, borders are invisible even if they have a width.
Learn more on MDN
THE CSS BOX MODEL
margin
border
padding
content
Content
Padding
Border
Margin