Border Generator

Craft a custom CSS border: width, style and color, with an instant preview and CSS, SCSS and Sass export.

Settings

Preview

Preview

Code


            
            
            

User guide

The shorthand border combines width, style and color: border: 2px solid #2563eb;. The corner radius is handled separately by border-radius.

  • Use dashed or dotted for light separators.
  • A 1px border with a translucent color looks modern.

FAQ

What's the difference between solid and double?

solid draws a single line; double draws two parallel lines whose combined thickness equals the defined width.

How do I add a border on one side only?

Use border-top, border-right, border-bottom or border-left instead of the border shorthand.