CSS Border Generator

A CSS border generator for every side, outline and gradient

The CSS Border Generator builds the border part of a stylesheet visually. Choose a width, one of the eight visible border styles (or none and hidden) and a colour for all four sides, or switch to Each side and give every edge its own settings. A resizable live preview shows the result on a light, dark or checkerboard background.

Add an outline with outline-offset for focus rings, paint the border with a gradient via border-image or layered backgrounds, and tick Logical properties to write border-block and border-inline for layouts that also run right to left.

The code is deliberately short: matching sides become one border declaration, and a single differing detail adds one longhand instead of four repeated rules. Tailwind CSS v4 classes appear underneath, and nothing leaves your browser.

How to use the CSS Border Generator

1. Pick a preset such as “Thin card”, “Double” or “Underline”, or start from the default purple border.
2. Leave “All sides” selected and set Width, Style and Colour, or choose “Each side” to edit every side separately.
3. Set a border radius, then add an outline style, width, colour and offset for a focus ring or second line.
4. Tick “Paint the border with a gradient”, choose two colours and an angle, and pick border-image or background layers.
5. Drag the preview’s corner or use the size sliders to check the border at the size of your real element.
6. Press “Copy CSS”, or “Copy classes” for the Tailwind version.

CSS Border Generator features

How the CSS border shorthand works

A border needs three things: a width, a style and a colour. border: 2px dashed #333; sets all three on every side. The style is the one people forget: its initial value is none, and a side whose style is none (or hidden) has a computed width of zero, so border: 2px #333; draws nothing at all. If you leave the colour out, the border uses the element’s text colour (currentColor).

Each side has its own shorthand (border-top and so on), and each property has a clockwise four-value form like margin: border-width: 1px 2px; means 1px top and bottom, 2px left and right. Later declarations override earlier ones, so “all sides alike except one” is best written as the shorthand plus one longhand.

Worked examples

These are exactly what the generator prints for each set-up:

The eight border styles, outline and gradients

• dotted, dashed, solid, double: double needs at least 3px to show two lines with a gap; browsers split the width into roughly equal thirds.
• groove, ridge, inset, outset: 3D bevels whose lighter and darker shades the browser derives from your colour (they vary slightly between browsers). Mid-tone greys look best.
• none vs hidden: both draw nothing; they differ only in collapsed table borders, where hidden also suppresses the neighbouring cell’s border.
• outline: drawn outside the border box without affecting layout, and it follows border-radius in current browsers — the usual way to build a clear keyboard focus ring.
• Gradient borders: border-image: linear-gradient(…) 1 is shortest but ignores border-radius; the background-layers technique keeps the corners rounded.

Logical properties and Tailwind

Logical properties name sides by writing direction instead of screen position. In a left-to-right page block-start is the top, block-end the bottom, inline-start the left and inline-end the right; in an Arabic or Hebrew page inline-start moves to the right automatically. border-block and border-inline set two opposite sides at once, which no physical property can. All current browsers support them.

The Tailwind output targets Tailwind CSS v4: border-3 means 3px, sides use t, r, b, l, x, y (and s/e for logical inline sides), and colours use arbitrary values such as border-[#333]. Tailwind has no per-side style, bevel style or border-image, so those are listed rather than guessed. Add depth with the Box Shadow Generator, and use the Contrast Checker when a border is the only thing marking a control — WCAG asks for 3:1 against its background.