Design the perfect border visually. Our free CSS Border Generator shows a live preview as you adjust width, style, colour and corner radius — then copies the CSS for you.
Paste the CSS into your stylesheet and add the class to any element. Everything runs in your browser; nothing is uploaded.
How to Use
- Set the border width in pixels.
- Choose a border style — solid, dashed, dotted, double or a 3D effect.
- Pick the border colour and corner radius.
- Watch the live preview update instantly.
- Click Copy CSS, paste it into your stylesheet and add the class to your element.
Key Features
- Live border preview on a sample box.
- Eight border styles including 3D effects.
- Colour picker and corner-radius control.
- Clean, ready-to-paste CSS output.
- 100% private — everything runs in your browser.
FAQs
How do I use the CSS on my website?
Paste the copied CSS into your stylesheet, then add class="custom-border" to any element — a div, button, card or image.
What border styles can I choose?
Solid, dashed, dotted, double, groove, ridge, inset and outset. The 3D styles (groove, ridge, inset, outset) shade the border for a raised or sunken look.
What is the difference between groove, ridge, inset and outset?
They are 3D border effects: groove looks carved in, ridge looks raised, inset makes the whole box look sunken and outset makes it look raised.
Can I set different borders on each side?
Yes — use border-top, border-right, border-bottom and border-left instead of the shorthand, each with its own width, style and colour.
Is my data sent anywhere?
No. The generator runs entirely in your browser with JavaScript, so nothing leaves your device.
Related Tools
You may also like our CSS Border Radius Generator, CSS Box Shadow Generator and CSS Button Generator.