CSS Border Style Generator

Features

• Seven styles: solid, dashed, dotted, double, 3D groove, 3D ridge and wave
• Border width from 1 to 20px and a colour picker
• Four corner radii set independently, or stretched into elliptical corners
• Slash-form output for elliptical corners (separate horizontal and vertical radii)
• Draw just the top, right, bottom or left edge
• Controllable dashes or wave patterns via border-image
• The preview updates instantly, with no Generate button
• Copyable border and border-radius declarations below
• Everything is computed in your browser; nothing is uploaded

How to use

1. Pick a style and set the width and colour
2. Fill in the four corners, or raise the vertical radius for elliptical corners
3. To draw a single edge, choose that side
4. For controllable dashes or a pattern, tick the border-image switch

FAQ

Why can I not control the dash length?

Because the specification does not fix the length of the dashes and gaps. Each browser draws them to its own proportions, so `border-style: dashed` carries only the idea of an alternating line, with no parameter for segment length. For fixed lengths — say 8px dashes with 4px gaps — you must switch to `border-image` with a repeating gradient: the coloured band becomes the dash and the transparent band the gap, so the length is whatever you write into the gradient. The controllable-dashes switch here takes exactly that route.

Why did my box grow when I added a border?

Because the default `box-sizing` is `content-box`: `width` covers the content only, and `border` and `padding` are added on top. A 200px box with an 8px border actually occupies 216px. The fix is `box-sizing: border-box` on the element (usually set once globally in modern projects); after that `width` includes the border and changing it no longer changes the overall size.

How do I give the four corners different radii?

With `border-radius`, space-separated values run top-left, top-right, bottom-right, bottom-left (clockwise from the top-left). Two values mean top-left with bottom-right, then top-right with bottom-left; with three, the last fills in the bottom-left. For elliptical corners (each a quarter ellipse rather than a quarter circle) use the slash: horizontal radii before it, vertical radii after, as in `10px 20px 30px 40px / 5px 10px 15px 20px`. The vertical radius percentage here produces exactly that second list.

Does drawing a single side affect layout?

Somewhat. With only `border-top`, the other three sides count as zero width, so the element grows by just those few pixels at the top; once the whole `border` is written, all four sides take space. Where layout is sensitive (tables, grids) pair it with `box-sizing: border-box`, or draw a line that takes no space at all using `outline` or a `box-shadow` instead.