CSS
CSS Borders: How Many Border Styles Are There in CSS?
Borders are a fundamental part of CSS—they help define boundaries, highlight elements, and enhance layout structure. One of the most useful CSS properties for working with borders is border-style.
But how many border styles does CSS actually support?
👉 CSS defines 10 border styles you can apply to any element.
✅ List of All CSS Border Styles
Here are all the official border styles you can use in CSS:
| Style Name | Description |
|---|---|
none | No border at all |
hidden | Similar to none, but used in table layouts (overrides other borders) |
solid | A single solid line |
dashed | A series of short dashes |
dotted | A series of round dots |
double | Two solid lines with some space in between |
groove | A 3D grooved border based on the element’s border-color |
ridge | A 3D ridged border that is the opposite of groove |
inset | A 3D inset effect that makes the element appear embedded |
outset | A 3D outset effect that makes the element appear raised |
✅ Example Usage
.box {
border: 3px solid red;
}
You can replace solid with any of the styles listed above.
Example with dashed:
.box {
border: 2px dashed blue;
}
✅ Apply Border Style to Individual Sides
CSS allows you to define border styles individually:
div {
border-top-style: solid;
border-right-style: dotted;
border-bottom-style: dashed;
border-left-style: double;
}
This gives you fine-grained control over how each side of an element is styled.
✅ Visual Overview
| Border Style | Visual Example |
|---|---|
solid | ─────────────── |
dashed | – – – – – – – – |
dotted | ·············· |
double | ══ ══ |
groove | 3D carved in |
ridge | 3D popped out |
inset | Pressed look |
outset | Raised look |
🧾 Summary
- ✅ 10 official CSS border styles
- 🔹 Use
border-styleto define how the border looks - 🎯 Can apply to all sides or individual sides
- 🎨 Combine with
border-widthandborder-colorfor full customization
🧠 Conclusion
CSS offers 10 border styles, each with unique effects ranging from clean lines to decorative 3D appearances. By mastering these, you can enhance your UI design and create elements that stand out while remaining accessible and visually balanced.
Pro Tip: Want subtle borders? Use 1px dotted or rgba() colors for softer edges.