Border Generator
Build CSS borders visually — width, style, color, and radius. Control all sides together or independently.
border: 2px solid #3b82f6;
border Shorthand
The border shorthand sets width, style, and color for all four sides at once: border: 2px solid #3b82f6. The style keyword (solid, dashed, etc.) is required — omitting it renders no border even if width and color are set.
Individual sides use border-top, border-right, border-bottom, and border-left. These can override specific sides after the shorthand.
Border Styles
- solid — single continuous line
- dashed — series of short dashes
- dotted — series of dots
- double — two parallel lines (needs width ≥ 3px)
- groove / ridge — 3D carved or embossed look
- inset / outset — element appears sunken or raised
- none — removes the border entirely
border-radius Tips
- Use
border-radius: 50%on a square to create a circle 9999pxon a rectangle creates a pill shape- Four values follow clock order: top-left, top-right, bottom-right, bottom-left
- Combine with
overflow: hiddento clip child content to the rounded shape - Elliptical corners use the
/syntax:border-radius: 20px / 10px
Frequently Asked Questions
Why is my double border not showing?
The double style requires at least 3px width to be visible — at that width the two lines and the gap between them are each 1px. Increase the width slider to 4–6px for a clear double border.
Can I animate borders?
border-color, border-width, and border-radius are all animatable via CSS transitions. border-style is not animatable — it switches instantly.
Does border affect layout?
With the default box-sizing: content-box, adding a border increases the element's rendered size. Switch to box-sizing: border-box (standard in most reset stylesheets) to include border in the declared width and height.
How do I create a border on only one side?
Use the individual side properties and set the others to none. For example: border-bottom: 2px solid #333; border-top: none; border-left: none; border-right: none;— or use the Individual mode in this tool and set unwanted sides to none.