CSS Border Generator

Design borders for all sides or each side and copy the shortest CSS.

Presets:

Thin gray
Dashed
Double
Accent left
Underline

Border width

4px

Border opacity

100%

Used in the generated code, e.g. .box

Preview

CSS
.box {
  border: 4px solid #D10505;
}

CSS Border Generator

Set the width, style, and color of a border and watch the preview change instantly. Switch to Each side separately to give the top, right, bottom, and left edges their own values – for example an accent stripe on the left of a card or an underline below a heading.

Shortest possible CSS

The generator does not just print four lines. It analyses the sides and chooses the most compact form:

  • All four sides equal → one border shorthand.
  • Three sides equal → border for the common value plus one override such as border-bottom.
  • Mixed values → one declaration per side.
.box {
  border: 1px solid #E0E0E0;
  border-left: 6px solid #D10505;
}

Border styles

  • solid, dashed, dotted – the everyday styles for UI elements and dividers.
  • double – two parallel lines; needs a width of at least 3px to be visible.
  • groove, ridge, inset, outset – 3D effects that shade the border with lighter and darker versions of the color.
  • none – removes the border on that side.

Border opacity

Translucent borders blend with whatever is behind them, which looks more natural on colored or image backgrounds than a fixed gray. A 10–20% black border, for example, darkens any background color by the same amount, so one rule works on light cards, colored badges, and photos alike. The generator writes them as RGBA values. If a border should not change the size of the element, combine it with box-sizing: border-box, or use outline or an inset box shadow instead.

Round the corners with the Border Radius Generator, or convert colors with HEX to RGB.

Frequently Asked Questions

Choose "Each side separately" and set the width of the other sides to 0. The generator then outputs only the border-top, border-right, border-bottom, or border-left declarations you need.

A double border splits the width into two lines and a gap, so it needs at least 3px. Increase the width to 4–6px for a clear effect.

With the default box-sizing: content-box, borders are added to the width and height. Set box-sizing: border-box to include the border in the declared size.