Round Corners and Border-Radius in CSS3

The border-radius property is one of those CSS techniques that has been experimental for a few of the last releases of CSS.

It is now supported by the latest versions of all major browsers.

You can use it with or without adding a border to your page element.

You can use it on all or selected corners.

Use ems or pixels for the value of the radius.

Experiment.

Code and Examples

All 4 Corners

border-radius: 1rem

Top corners

border-radius: 1rem 1rem 0 0

Bottom corners

border-radius: 0 0 2rem 2rem

No Border with Inset Box shadow/normal

border-radius: 2rem; box-shadow: 4px 4px 10px #444 inset

No Border with Inset Box shadow/Raised

border-radius: 2rem; box-shadow: -4px -4px 10px #000 inset

The Circle (Fixed Width)

width: 200px; height: 200px; border-radius :50%; border:solid #000 2px

See Also: Box Shadow

🔺