Borders Are Not Just Decoration
1. Border Properties
For a border to appear, it needs a command of three parts: Thickness, Type, and Color.
border: 2px dashed #f00;
- solid: solid line.
- dashed: dashed line.
- dotted: dots.
- double: double line (requires at least 3px thickness).
2. Border vs Outline
Many confuse these two properties.
- Border: Takes space in the box model. Increasing border thickness " pushes " neighbors apart.
- Outline: Drawn OVER the element. Doesn't take space.
- When to use: For
:focusindication (blue frame when selected with tab).
- When to use: For
3. Border-radius: Not Just Circles
You can set rounding for each corner separately.
border-radius: 10px 50px 10px 50px; /* Leaf effect */