Borders in CSS
?? Borders in CSS
Borders let you add visible lines around HTML elements. You can control their width, style, color, radius, and more for versatile designs.
1. Basic Border Properties
| Property | Description | Example |
|---|---|---|
border-width | Thickness of the border | border-width: 2px; |
border-style | Style of the border line | border-style: solid; |
border-color | Color of the border | border-color: red; |
border | Shorthand for width, style, color | border: 3px dashed blue; |
2. Border Styles
| Style | Description |
|---|---|
none | No border |
solid | Solid line |
dashed | Dashed line |
dotted | Dotted line |
double | Two solid lines |
groove | 3D grooved border |
ridge | 3D ridged border |
inset | 3D inset border |
outset | 3D outset border |
3. Border Width
Can be specified in length units (px, em, rem) or keywords:
thin(usually 1px)medium(default)thick(usually 5px)
div { border-width: 5px;}4. Individual Borders
You can control each side separately:
div { border-top: 2px solid red; border-right: 4px dashed green; border-bottom: 3px dotted blue; border-left: 1px solid black;}Or shorthand:
div { border-width: 2px 4px 3px 1px; /* top, right, bottom, left */}5. Border Radius (Rounded Corners)
Controls the roundness of corners.
div { border: 2px solid black; border-radius: 10px;}You can specify corners individually:
div { border-top-left-radius: 10px; border-top-right-radius: 5px;}6. Outline (Outside Border)
Outlines behave like borders but don’t affect layout.
Does not take space, no border-radius.
div { outline: 3px solid orange;}7. Border Images
You can use an image as a border with border-image (more advanced).
Example:
.box { border: 3px solid teal; border-radius: 8px; padding: 20px;}If you want, I can show examples on how to create fancy borders (like dotted, double, shadowed) or how to combine borders with box-shadow!
