askvity

How Can You Create Rounded Corners Using CSS3?

Published in CSS Border-Radius 4 mins read

You can use the border-radius property to add CSS rounded corners to any element. This powerful CSS3 property simplifies the process of rounding edges without needing images or complex techniques.

Understanding the border-radius Property

The primary way to achieve rounded corners in CSS3 is by using the border-radius property. This property allows you to control the curvature of an element's corners. You can specify the border-radius in pixels or percentages, offering flexibility in how rounded your corners appear.

  • Pixels (px): Define a fixed radius size. For example, 10px creates a rounded corner with a 10-pixel radius.
  • Percentages (%): Define the radius relative to the dimensions of the element (specifically, the width and height of the border box). For example, 50% on a square element will create a perfect circle.

Basic Syntax

The simplest way to apply the same radius to all four corners is:

.element {
  border-radius: 10px; /* Applies a 10px radius to all corners */
}

or

.circle {
  width: 100px;
  height: 100px;
  background-color: blue;
  border-radius: 50%; /* Makes a perfect circle */
}

Specifying Individual Corners

The reference mentions that we can independently specify the border radius for each corner by using the constituent properties. While border-radius itself can take up to four values to specify each corner, dedicated properties offer more explicit control.

Here are the individual properties:

  • border-top-left-radius: Controls the top-left corner.
  • border-top-right-radius: Controls the top-right corner.
  • border-bottom-right-radius: Controls the bottom-right corner.
  • border-bottom-left-radius: Controls the bottom-left corner.

Examples of Individual Corner Control

.custom-corners {
  border-top-left-radius: 20px;
  border-bottom-right-radius: 20px;
  /* Other corners will have default (0) radius */
}

Alternatively, you can use the shorthand border-radius property with multiple values:

  • One value: Applies to all four corners (e.g., border-radius: 10px;).
  • Two values: The first value applies to the top-left and bottom-right corners; the second applies to the top-right and bottom-left corners (e.g., border-radius: 10px 5px;).
  • Three values: The first value applies to the top-left corner; the second applies to the top-right and bottom-left corners; the third applies to the bottom-right corner (e.g., border-radius: 10px 5px 15px;).
  • Four values: Apply sequentially to the top-left, top-right, bottom-right, and bottom-left corners (e.g., border-radius: 10px 5px 15px 0;).

Here's a quick summary in a table format:

border-radius Values Applies To Example
radius All 4 corners 10px
v1 v2 Top-left & Bottom-right (v1), Top-right & Bottom-left (v2) 10px 5px
v1 v2 v3 Top-left (v1), Top-right & Bottom-left (v2), Bottom-right (v3) 10px 5px 15px
v1 v2 v3 v4 Top-left (v1), Top-right (v2), Bottom-right (v3), Bottom-left (v4) 10px 5px 15px 0

Creating Elliptical Borders

The reference also highlights that we can also use the border-radius property to create elliptical borders. This is done by providing two values for a single corner radius, separated by a slash /. The first value sets the horizontal radius, and the second sets the vertical radius.

For example, to create an elliptical corner in the top-left:

.elliptical-corner {
  border-top-left-radius: 30px / 15px; /* Horizontal radius 30px, Vertical radius 15px */
}

You can also combine this with the shorthand border-radius property. When using the shorthand for elliptical corners, you provide the horizontal radii first, followed by a slash /, and then the vertical radii.

.elliptical-box {
  border-radius: 30px 10px 40px 0 / 15px 25px 50px 5px;
  /*
  Horizontal radii: Top-left 30px, Top-right 10px, Bottom-right 40px, Bottom-left 0
  Vertical radii:   Top-left 15px, Top-right 25px, Bottom-right 50px, Bottom-left 5px
  */
}

By mastering the border-radius property and its variations, you can easily add rounded corners, partial rounded corners, circles, and elliptical shapes to elements in your web designs using CSS3.

Related Articles