Border
A CSS border is the line or decorative edge drawn around an element’s padding and content areas.
Borders can vary in width, style, color and radius. They also affect box dimensions unless border-box sizing is used.
The edge between padding and outside space
Borders can vary in width, style, color and radius. They also affect box dimensions unless border-box sizing is used. In practical terms, Border belongs to the presentation and layout layer. Knowing that layer is important because it tells you what the term can change, what it cannot change, and where to look when something behaves unexpectedly.
Giving a component a visible boundary
border: 1px solid #ddd creates a line around the border box and can contribute to the element’s rendered size.
Where borders affect box size
You do not need to memorize the term in isolation. It becomes useful when you can recognize it in the tool, browser, file or conversation where the concept is doing real work.
Border is not an outline
A CSS border is the line or decorative edge drawn around an element’s padding and content areas. By contrast, The CSS box model describes an element as content surrounded by padding, border and margin areas. The two can appear in the same project, but they describe different parts of the work and should not be used as interchangeable labels.
The mistake: forgetting border width in dimensions
The common mistake is to use Border as if it also meant Box Model. That blurs two separate decisions and usually sends troubleshooting in the wrong direction. A better test is practical: Check border width together with box-sizing when exact dimensions matter.
Why edges communicate grouping and state
In day-to-day work, Border matters when the concept needs to be identified precisely instead of being grouped with a nearby term. The practical value is not the vocabulary itself; it is being able to identify the right control, file, setting or decision when the concept becomes relevant.
border: 1px solid #ddd creates a line around the border box and can contribute to the element’s rendered size. That example is useful because it turns the definition into something you can recognize, test and discuss with other people working on the same project.
Related terms worth learning next
Sources and further reading
Use these references when you need documentation-level detail, specifications or product-specific behavior beyond the plain-English explanation above.