CSS Border Generator

A CSS border adds a visible line around any HTML element. There are four properties you can control: the style of the line (solid, dashed, dotted, and more), the width in pixels, the color, and the border-radius, which rounds the corners.

A border radius of 50% on a square element will turn it into a perfect circle, which is a popular technique for profile photos and icons. You can also apply a border to just one side of an element, which is useful for design details like a colored line under a heading or a left border that highlights a quote block.

To learn more about borders, see our lessons on Borders and Border Radius.

Use the generator to experiment with the settings, then copy the CSS directly into your stylesheet.