Pick a border style
Cycle through every standard CSS border-style keyword.
CSS Border Pattern Generator
Preview dashed, dotted, double, groove and ridge borders side by side, adjust width and color, then copy the CSS.
Ready-to-use CSS
How it works
Adjust width and color
Fine-tune thickness, color and corner rounding.
Copy the CSS
Get a ready-to-paste border declaration for your project.
FAQ
What border styles does CSS support?
CSS supports solid, dashed, dotted, double, groove, ridge, inset and outset border-style keywords, all covered by this generator.
Why do groove and ridge need a thicker width?
Those styles simulate a 3D bevel using two shades of your border color, which is easiest to see at 4px or thicker.
Can I combine this with border-radius?
Yes, the radius slider applies border-radius alongside the border style, and both are included in the copied CSS.