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.



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;


border-left-radius: value px;

Syntax - Firefox


Syntax - Webkit browsers (Safari, Chrome)


Examples - Border-radius

Example 1

border-radius: 50px;

Example 2

border-radius: 50px 0px 0px 0px;

Example 3

border-radius: 50px 50px 0px 0px;

Example 4

border-radius: 50px 0px 50px 0px;