Detailed Explanation of the border-radius Property in CSS

Detailed Explanation of the border-radius Property in CSS

Description
The border-radius property is used to set the rounded corners of an element's border. By adjusting the corner radius, visual effects ranging from slightly rounded to completely elliptical can be achieved. This property supports 1 to 4 values, allowing control over the radius of each of the four corners separately. It also supports slash syntax to define different values for the horizontal and vertical radii.

Basic Syntax and Values

  1. Single Value: border-radius: 10px; sets all four corners to a radius of 10px.
  2. Multiple Values:
    • Two values: 10px 20px → top-left/bottom-right are 10px, top-right/bottom-left are 20px.
    • Three values: 10px 20px 30px → top-left 10px, top-right/bottom-left 20px, bottom-right 30px.
    • Four values: 10px 20px 30px 40px → sets corners clockwise starting from the top-left.

Elliptical Corners: Slash Syntax
Define asymmetric corners using horizontal-radius / vertical-radius:

  • Example: border-radius: 20px / 10px; means a horizontal radius of 20px and a vertical radius of 10px for all corners, creating an elliptical corner.
  • Extended syntax: border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px; allows setting the horizontal and vertical radius for each corner individually.

Specific Corner Control
Sub-properties can be used to control individual corners:

  • border-top-left-radius: top-left corner
  • border-top-right-radius: top-right corner
  • border-bottom-right-radius: bottom-right corner
  • border-bottom-left-radius: bottom-left corner
    Example: border-top-left-radius: 20px 10px; defines a top-left corner with a 20px horizontal radius and a 10px vertical radius.

Percentage Value Calculation
Percentages are calculated relative to the element's own dimensions:

  • The horizontal radius percentage references the element's width, and the vertical radius percentage references the element's height.
  • Example: For a 200px × 100px element with border-radius: 50%;, the effective radii are 100px horizontal and 50px vertical, creating an ellipse.

Practical Application Tips

  1. Circular Elements: Apply border-radius: 50% to an element with equal width and height to create a circle.
  2. Capsule Buttons: For a rectangle, set border-radius: height/2 (e.g., 15px for a 30px height).
  3. Advanced Shapes: Combine different corner radii to create shapes like semicircles or sectors (e.g., setting only two adjacent corners to 50%).

Notes

  • The rounded corner area does not trigger click events (it follows the visible outline).
  • When a parent element has overflow: hidden, child elements will not overflow the rounded corner area.
  • Background colors/images adapt to the rounded corners, but border styles may be affected by browser rendering differences.