CSS border-radius property

Description

CSS border-radius property defines the length of both horizontal and vertical radii of bottom-right quarter of a box i.e. coverts sharp corners to rounded corners.

Syntax

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

Property values

0pxDefault

It is the same as

  • border-top-left-radius:0px;
  • border-top-right-radius:0px;
  • border-bottom-right-radius:0px;
  • border-bottom-left-radius:0px;

border-radius: 0px;

20px 40px

It is the same as

  • border-top-left-radius: 20px;
  • border-top-right-radius: 40px;
  • border-bottom-right-radius: 20px;
  • border-bottom-left-radius: 40px;

border-radius: 20px 40px;

20px 40px 60px

It is the same as

  • border-top-left-radius: 20px;
  • border-top-right-radius: 40px;
  • border-bottom-right-radius: 60px;
  • border-bottom-left-radius: 40px;

border-radius: 10px 20px 30px;

10px 20px 30px 40px

It is the same as

  • border-top-left-radius: 10px;
  • border-top-right-radius: 20px;
  • border-bottom-right-radius: 30px;
  • border-bottom-left-radius: 40px;

border-radius: 10px 20px 30px 40px;

10px 20px 30px 40px / 50px 60px 70px 80px

It is the same as

  • border-top-left-radius: 10px 50px;
  • border-top-right-radius: 20px 60px;
  • border-bottom-right-radius: 30px 70px;
  • border-bottom-left-radius: 40px 80px;

border-radius: 10px 20px 30px 40px / 50px 60px 70px 80px;

Applicable to

It applies to all elements

From web4college, the free CSS digger

#CSS digger
Was this article helpful?

 
▾
×

Ctrl+D