CSS Border Generator

How to use the css border generator

1. Adjust the controls and watch the preview update.
2. Read the generated CSS below the controls.
3. Copy it into your stylesheet.

About this tool

A border takes a width, a style and a colour, and the style is required — a border with a width and a colour but no style shows nothing at all, which is the single most common reason a border seems to be missing.

Borders take up space in the box model. Adding a 2px border grows the element by 4px in each dimension unless box-sizing: border-box is set, which is why layouts shift when a border appears on hover. Using a transparent border in the resting state avoids that jump.

An outline is the alternative when you do not want the size to change: it draws outside the box without affecting layout, which is exactly why it is used for focus rings.

Common uses

• Adding a border on hover without the layout jumping.
• Trying dashed, dotted and double styles side by side.
• Bordering only one side, such as a left accent rule.

Frequently asked questions

Why is my border invisible?

There is no border-style. Width and colour alone render nothing — style defaults to none.

Why does the layout shift when a border appears?

Borders add to the element's size. Either set box-sizing: border-box, or keep a transparent border in the resting state so only its colour changes.

What is the difference between border and outline?

An outline is drawn outside the box and takes no space, so it never affects layout. That is why focus rings use it.