Menu
Box Model & Layout
CSS Borders
Style the edge of your elements.
1Border Properties
Control width, style, and color.
Example Code
css
div {
border: 2px solid black;
border-radius: 8px; /* Rounded corners */
}2Understand it in a real interface
A border can identify the edge of a surface without requiring a large shadow. It occupies space in the box model, unlike an outline. If a hover or error state changes border thickness, the component may change size unless that space was already reserved.
3Try it yourself
Build a bordered input-like panel with a fixed padding. Change its border color for a selected state while keeping the thickness stable. Compare that with a thicker border, then inspect whether surrounding content shifts. Try an outline for an independent focus treatment.
Finished reading?
Mark this topic as complete to track progress.