</>
cssgenerators.dev
Star on GitHub
Tools / Border

CSS Border Generator

Pick a border style, width, color and corner radius — generate border and border-radius CSS with live preview.

Border style
Border width2px
Border color#6366f1
Border radius
All corners
All corners8px
CSS
.element {
  border: 2px solid #6366f1;
  border-radius: 8px;
}

CSS generated is free to use — no attribution required.

What are the CSS border properties?

The border shorthand sets width, style and color in one declaration: border: 2px solid #6366f1. You can also set individual sides: border-top, border-right, border-bottom, border-left.

What are the CSS border styles?

solid — continuous line. dashed — series of short dashes. dotted — series of dots. double — two parallel solid lines. groove/ridge — 3D effects that use the border-color. inset/outset — make the element appear embedded or raised.

How does border-radius work in CSS?

border-radius: 8px rounds all four corners equally. Use individual corner values for asymmetric shapes: border-radius: 10px 5px 20px 0 (top-left, top-right, bottom-right, bottom-left).

How do you create a pill shape with CSS border-radius?

Set border-radius: 9999px to create a pill/capsule shape that works at any element width.

Other CSS Tools
Box ShadowButtonFlexboxTriangle