CSS Borders: Boxing your Layouts
Borders are the defining lines of the CSS Box Model. They separate elements, provide structure, and guide the user's eye. Mastering borders means mastering the geometry of the web.
The Foundation: Border Properties
A border consists of three distinct components: its width, its style, and its color. If you are missing the border-style, the border simply won't appear.
- Style: Can be
solid,dashed,dotted,double,groove,ridge,inset, oroutset. - Width: Accepts specific values like
px,rem, or keywords likethin,medium,thick. - Color: Any valid CSS color format (hex, rgb, named, hsl).
The Shorthand Syntax
To keep your CSS clean and readable, you will almost exclusively use the shorthand border property. It combines all three aspects into a single line.
border: 2px solid black;
border-bottom: 4px dashed red;You can also target specific sides of the element using border-top, border-right, border-bottom, and border-left.
Rounding Corners: Border Radius
The border-radius property allows you to soften the edges of your boxes. It doesn't just round the border line; it rounds the background and the clipping area of the box itself.
You can supply up to 4 values to target individual corners (Top-Left, Top-Right, Bottom-Right, Bottom-Left), or use a percentage like 50% on a square element to create a perfect circle.
View Accessibility Tip: Outlines+
Never remove outlines without a replacement! outline is similar to border, but it's drawn *outside* the box model and doesn't affect layout. Browsers use outlines to show keyboard focus (when a user tabs to a button or link). If you set outline: none; for aesthetics, you MUST provide an alternative visual focus state (like a box-shadow or an explicit border change), otherwise keyboard users won't know where they are on the page.
❓ Frequently Asked Questions
Why doesn't my border show if I set width and color?
Because by default, the `border-style` property has the value `none`. You must explicitly tell the browser what type of line you want to draw (for example, `solid`, `dashed`, etc.).
What's the difference between border and outline?
Border: Is part of the Box Model. It adds size to the element's total width and height (if you use `box-sizing: content-box`).
Outline: Draws *outside* the border. It takes no space and doesn't push other elements, making it ideal for `:focus` states. You can also distance it using the `outline-offset` property.
How do I set different border-radius for each corner?
You can pass up to 4 values to the `border-radius` property. The order starts at the top-left and goes clockwise: `Top-Left`, `Top-Right`, `Bottom-Right`, `Bottom-Left`.
/* Top-Left Top-Right Bottom-Right Bottom-Left */
border-radius: 10px 5px 20px 0;