Trusted answers to developer questions

How to create a border radius in CSS

Get Started With Data Science

Learn the fundamentals of Data Science with this free course. Future-proof your career by adding Data Science skills to your toolkit — or prepare to land a job in AI, Machine Learning, or Data Analysis.

What is the border-radius?

border-radius is a CSS property that defines the radius of the corners of an element.

It gives a rounded shape to the corners of an element’s outer border edge. The values of the border radius can be declared in percentages or length units.

The image below shows the different corners of an element.

The four corners of an element

Syntax

border-radius: num_px percentage;

Parameters

  • num_px: This is the number of pixels you want for the radius.
  • percentage: This is the percentage you want the border to be edited.

You can also use the inherit, initial, revert, or unset properties.

How to use border-radius

The border-radius property can have one to four values.

The corners are rounded depending on the value passed into the property.

We have stated the range of values that can be declared, so let’s move on and see how it works.

One value border-radius

When you pass in one value into the border-radius, it rounds all the corners of your elements equally.

Example 1

Two value border-radius

When you pass two values into the border-radius property, the first value will be used for the top-left and bottom-right corners.

The second value will be used for the top-right and bottom-left corners.

Example 2

Three value border-radius

For three values, the first value is used for the top-left corner.

The second value is used for the top-right and bottom-left corners, while the third value is used for the bottom-right corner.

Example 3

Four value border-radius

When four values are declared, the first value is used for the top-left corner, the second value for the top-right corner, the third value applies to bottom-right corner and the fourth value applies to bottom-left.

Example 4

RELATED TAGS

css
basics
styling
Did you find this helpful?