Web4College

CSS border-radius property

src

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;
Try it

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;
Try it

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;
Try it

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;
Try it

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;
Try it

Applicable to

It applies to all elements