Shape & Layout · Free generator

CSS Border Generator

Free · no sign-up Live preview · copy or download the CSS

Every border property on sliders: width, all eight styles (yes, groove and ridge still exist), color and radius — with the CSS updating live as you drag.

Settings

Bordered element
Generated CSS — updates live


Ready-made examples — click any card to copy its CSS
Proven starting points. Clicking a card copies the full CSS to your clipboard.


The CSS you need to build this yourself
Understand the output, not just copy it — these lessons on our learning path teach exactly what this tool automates:
STEP 1 · 15 minCSS Borders & RadiusEvery border property in depth.STEP 2 · 20 minThe CSS Box ModelHow borders affect element size.STEP 3 · 15 minCSS ColorsPicking border colors that work.


  1. CSS Border Radius GeneratorShape & Layout
  2. CSS Box Shadow GeneratorShadows & Effects
  3. CSS Layer Styles GeneratorShadows & Effects
  4. CSS Card GeneratorUI Components
  5. CSS Button GeneratorTypography & Buttons


How it works


The border shorthand packs width, style and color into one declaration; style is the only mandatory part. Each side can also be set independently (border-top, etc.) — the single-side accent bar is one of the most-used patterns in interface design.


Radius is technically separate from border but they're designed together in practice — this tool pairs them so the copied snippet is complete.


Run the code — try it yourself
Give the panel a 1px solid #E4E9EE border with 14px radius, then change it to a 4px left accent bar in #63B29A.


exercise.html — editable


Frequently asked questions
Why does my border change the element's size?
Borders add to rendered size in the default content-box model. Set box-sizing: border-box globally and declared widths include the border — see the Box Model lesson.
What's the difference between double, groove and ridge?
double draws two lines; groove/ridge fake 3D by splitting the color into light/dark halves — retro, but occasionally perfect.
Can borders be gradients?
Not directly via border-color; use border-image or a padded gradient background — the Layer Styles generator shows the technique.


Keep going
Borders are the quiet workhorse of visual hierarchy — hairlines separate, accents emphasize. The theory lives in the CSS Borders & Radius lesson.
CSSmatic is a non-profit project, made by developers for developers.