Can I set a different radius for each corner?

Yes — untick "Link corners" and each of the four radius sliders (top-left, top-right, bottom-left, bottom-right) becomes independent, generating a border-radius shorthand with four values.

What border styles are supported?

Solid, dashed, dotted, double, groove, and ridge — the standard CSS border-style keywords with visible browser support.

Does this generate one property or separate ones?

It outputs a border shorthand (width, style, color) and a separate border-radius line, so you can copy either or both straight into your stylesheet.

Is anything sent to a server?

No — the preview and CSS are generated locally in your browser as you adjust the controls.

CSS BORDER GENERATOR

Build a border visually and copy the CSS. Nothing leaves your browser.

Width4px

Style

Color

Corner radiusLink corners

Top left12px

Top right12px

Bottom left12px

Bottom right12px

CSS

border: 4px solid #ff6a35;
border-radius: 12px;

How to build a CSS border

1
Set the border width, style, and color.
2
Adjust the corner radius, linked or per corner.
3
Copy the generated border and border-radius CSS from the code box.

Questions

Can I set a different radius for each corner?: Yes — untick "Link corners" and each of the four radius sliders (top-left, top-right, bottom-left, bottom-right) becomes independent, generating a border-radius shorthand with four values.
What border styles are supported?: Solid, dashed, dotted, double, groove, and ridge — the standard CSS border-style keywords with visible browser support.
Does this generate one property or separate ones?: It outputs a border shorthand (width, style, color) and a separate border-radius line, so you can copy either or both straight into your stylesheet.
Is anything sent to a server?: No — the preview and CSS are generated locally in your browser as you adjust the controls.