Ways to define CSS border-radius with 3 examples

How to define the border radius?

The CSS border-radius property sets the rounding of the borders of the specified element. The round may be circle or ellipse. You can set the border-radius in the single declaration by using: e.g.

border-radius: 15px;

>>See A border-radius example by single declaration

Or by using specific border side like top left, or top right, bottom left or bottom right separately: e.g.

border-top-left-radius: 10px;

border-top-right-radius: 20px;

The examples below shows both ways of using the border-radius i.e setting the radius of borders in one declaration and separately.

A Short Video on border-radius property

Setting circular border radius with short-hand

This example sets the border radius of all sides for a div element by single declaration using the border-radius CSS property.

CSS border radius

Experience this example online

Setting border radius for each corner in circle

This example sets the border radius of all sides separately by using the border-radius properties in the div element. Following border-radius properties are used:

  1. border-top-left-radius;
  2. border-top-right-radius;
  3. border-bottom-left-radius;
  4. border-bottom-right-radius;
Experience this example online

Setting ellipsis border radius with horizontal and vertical values example

Experience this example online

You can see, the value in CSS border radius is specified for vertical and horizontal values to make ellipsis border.

Further Reading: CSS border | CSS border color