CSS Border-radius

A border-radius will give an element round corners. This is a new feature in CSS3, and most current bowers will support border-radius.

Syntax

border-radius:valuepx;

This is the general syntax. Most browsers will be able to understand this, however you may need to specify the prefix in some cases. This syntax is also the short hand method and applies the rounded corners to the whole element. You can specify each radius separately.

border-radius: top-left, top-right, bottom-left, bottom-right;

or

border-left-radius: value px;

Syntax – Firefox

-moz-border-radius:valuepx;

Syntax – Webkit browsers (Safari, Chrome)

-webkit-border-radius:valuepx;

Examples – Border-radius