Why Does `border-radius` Produce Different Shapes with Percentages vs. Pixels/ems?

Border-Radius in Pixels (%) and Pixels (px) or Em

Why Does Border-Radius Act Differently with Percentages and Pixels?

Border-radius allows you to round the corners of your web elements. However, when using percentages or pixels, the shape of the corners changes.

Percentage Values

According to CSS Backgrounds and Borders Module Level 3, percentages refer to the corresponding dimension of the border box. For example, if you set border-radius: 50%;, the radii on the X axis is 50% of the container's width, and the radii on the Y axis is 50% of the container's height. This results in an elliptic shape.

Pixel and Other Unit Values

Using a single pixel value or other unit (e.g., em, in) for border-radius always produces an ellipse, or in other words, a circle.

However, when the curves overlap, a rule is applied that reduces the radii to half the size of the smallest side. For instance, if you set border-radius: 999px; on an element that is 230px x 100px, the radii would be reduced to 50px, which is half the height of the element.

Example

Consider the following code snippet:

.percent {
  border-radius: 50%;
}
.pixels {
  border-radius: 115px/50px;
}

/* For the demo : */
div {
  display: inline-block;
  background: teal;
  width: 230px;
  height: 100px;
  padding: 40px 10px;
  box-sizing: border-box;
  font-family: courier;
  font-size: 0.8em;
  color: #fff;
  text-align: center;
}

With border-radius: 50%;, the corners will have an elliptic shape. With border-radius: 115px/50px;, the corners will have the same elliptic shape since 115px/50px is equivalent to 50% of both sides for an element that is 230px x 100px.

The above is the detailed content of Why Does `border-radius` Produce Different Shapes with Percentages vs. Pixels/ems?. For more information, please follow other related articles on the PHP Chinese website!