Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

css
basics
styling
communitycreator

How to create a border radius in CSS

Lateefat Salami

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

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
communitycreator

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring