What border styles are supported?

All standard CSS border styles are supported: solid, dashed, dotted, double, groove, ridge, inset, and outset.

Can I set different radii for each corner?

Yes, expand the Border Radius section and toggle to 'Per corner' mode to set individual values for top-left, top-right, bottom-right, and bottom-left.

What is 'outline-offset'?

Outline-offset controls the space between the element's edge and its outline. A positive value moves the outline outward; a negative value moves it inward.

How is box-shadow different from border?

Box-shadow does not affect layout — it is rendered outside the box model — whereas border adds to the element's dimensions. Box-shadow also supports spread, blur, and multiple layers.

design Free No signup

CSS Border & Outline Generator

Visually build CSS borders, outlines, and box-shadows with live preview and instant code output.

Loading tool…

About this tool

A visual builder for CSS border and outline styles. Control border width, style, color, and per-corner border-radius, or customize each side (top, right, bottom, left) individually. Add outlines with configurable offset, and use box-shadow as a border alternative. The live preview updates instantly and the generated CSS is always ready to copy.

How to use

1 Step 1: Choose between 'All sides' or 'Individual sides' mode to control borders uniformly or per-side.
2 Step 2: Adjust border width, style, and color using the controls, and set border-radius per corner or uniformly.
3 Step 3: Enable the Outline or Box Shadow sections to add those styles to your element and configure their options.
4 Step 4: Click 'Copy CSS' to copy the generated CSS code, then paste it into your project.

About this tool

How to use

Frequently Asked Questions