CSS3 Rounded Corners

CSS Rounded Corners (border-radius)

The CSS `border-radius` property allows you to create rounded corners on elements. This is a fundamental technique for modern UI design, softening sharp edges and creating circular or elliptical shapes.

Browser Support

The border-radius property is fully supported in all modern web browsers. Vendor prefixes are no longer necessary.

Using border-radius

You can apply border-radius to any element, whether it has a visible border, a background color, or a background image. The rounding effect applies to the element’s outer border edge.

Basic Examples:

/* 1. Rounded corners with a background color */
#rcorners-bg {
  border-radius: 15px; /* Apply a 15px radius to all corners */
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 100px;
}

/* 2. Rounded corners with a visible border */
#rcorners-border {
  border-radius: 25px;
  border: 2px solid #73AD21;
  padding: 20px;
  width: 200px;
  height: 100px;
}

/* 3. Rounded corners with a background image */
#rcorners-img {
  border-radius: 10px;
  background: url('path/to/your/image.jpg'); /* Ensure path is correct */
  background-position: center center;
  background-size: cover;
  padding: 20px;
  width: 200px;
  height: 100px;
  color: white; /* Example text color */
  text-align: center;
}

Specifying Individual Corners

The border-radius property is a shorthand. You can provide one, two, three, or four values to control the corners individually:

• One value: border-radius: 15px; - Applies to all four corners.
• Two values: border-radius: 15px 50px; - First value applies to top-left and bottom-right. Second value applies to top-right and bottom-left.
• Three values: border-radius: 15px 50px 30px; - First value (15px) applies to top-left. Second value (50px) applies to top-right and bottom-left. Third value (30px) applies to bottom-right.
• Four values: border-radius: 15px 50px 30px 5px; - Applies clockwise: top-left (15px), top-right (50px), bottom-right (30px), bottom-left (5px).

Example with Four Values:

#rcorners-individual {
  /* TL=15px, TR=50px, BR=30px, BL=5px */
  border-radius: 15px 50px 30px 5px;
  background: orange;
  padding: 20px;
  width: 200px;
  height: 100px;
}

Creating Elliptical Corners:

You can create elliptical corners by providing two values separated by a slash (/) for any of the corner settings. The first value represents the horizontal radius, and the second represents the vertical radius.

#rcorners-ellipse1 {
  /* All corners: 50px horizontal radius, 15px vertical radius */
  border-radius: 50px / 15px;
  background: lightcoral;
  padding: 20px;
  width: 200px;
  height: 100px;
}

#rcorners-ellipse2 {
  /* All corners: 15px horizontal radius, 50px vertical radius */
  border-radius: 15px / 50px;
  background: lightseagreen;
  padding: 20px;
  width: 200px;
  height: 100px;
}

Creating Circles:

A common use case is creating a perfect circle from a square element by setting border-radius to 50%.

#circle {
  border-radius: 50%; /* Makes a circle if width == height */
  background: dodgerblue;
  width: 150px;
  height: 150px;
}

Shorthand vs. Longhand Properties

While the border-radius shorthand is commonly used, you can also set each corner individually using longhand properties:

Property	Description
border-top-left-radius	Defines the rounding of the top-left corner.
border-top-right-radius	Defines the rounding of the top-right corner.
border-bottom-right-radius	Defines the rounding of the bottom-right corner.
border-bottom-left-radius	Defines the rounding of the bottom-left corner.
border-radius	Shorthand for setting all four corner radii.

Example using longhand:

.custom-corners {
  background: gold;
  padding: 20px;
  width: 200px;
  height: 100px;
  border-top-left-radius: 40px 20px; /* Elliptical top-left */
  border-bottom-right-radius: 30px; /* Rounded bottom-right */
  /* Other corners remain sharp */
}

Learn more on MDN: [https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius)