CSS Border Generator

.box {
  border: 4px dashed #2ba563;
  border-radius: 12px;
}

Drag the sliders and watch the box change, then copy the CSS. Pick the width, any of the eight border styles (solid, dashed, dotted, double, groove, ridge, inset, outset) and a color, and round the corners with border-radius. Need a different border on one side, like a thick bottom line under a heading? Switch on different sides and set each one. The same goes for corners. Gradient mode makes the border a color gradient. border-image can do that too, but it ignores border-radius and gives you square corners. This uses the method that keeps them round: a transparent border over two backgrounds, one clipped to the inside and one to the border. The CSS comes out as short as it can be, as one border shorthand when all four sides match.