CSS
CSS Border Styles: How Many Are There?
In modern web design, borders do much more than just outline elements — they help define structure, create visual emphasis, and improve user experience. CSS makes it easy to apply borders using the border-style property. But how many styles does CSS offer?
👉 There are 10 official border styles in CSS — each offering a unique visual effect.
✅ List of All CSS Border Styles
Below are the 10 CSS border styles, with a brief description of what each one does:
| Style | Description |
|---|---|
none | No border is displayed. |
hidden | Similar to none, but used in table elements to override other borders. |
solid | A single, straight, solid line. |
dashed | A series of short dashes. |
dotted | A series of round dots. |
double | Two solid lines separated by space. |
groove | Gives the border a 3D grooved look using shading. |
ridge | Opposite of groove, creating a raised 3D look. |
inset | Makes the element appear embedded (pressed in). |
outset | Makes the element appear pushed out (raised). |
✅ How to Use border-style in CSS
To apply a border style, use the border-style property in your CSS:
.box {
border: 3px solid black;
}
You can replace solid with any of the 10 styles listed above.
✅ Apply Different Styles to Each Side
CSS allows separate styles for top, right, bottom, and left:
div {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dashed;
border-left-style: double;
}
This flexibility is especially useful in creative UI design and layout customization.
✅ Combine with Color and Width
You can also combine border-style with border-color and border-width:
.card {
border: 2px ridge #007bff;
}
This creates a 3D ridge border with a custom color.
🧾 Summary Table
| CSS Property | Purpose |
|---|---|
border-style | Sets how the border looks |
border-width | Sets how thick the border is |
border-color | Sets the color of the border |
🧠 Final Thoughts
There are 10 official CSS border styles, ranging from simple (solid, dashed) to decorative (groove, ridge, double). Mastering these styles gives you the power to shape your design precisely — whether you’re styling buttons, cards, tables, or layouts.
Pro Tip: When in doubt, start with solid or dashed for clean, modern UI — and experiment with ridge, groove, or double for creative flair.