CSS border-radius Property

The border-radius property defines the radius of an element's corners, allowing you to create rounded edges, circles, or ellipses.

selector { border-radius: value; }
<length> Defines the radius of the corner curvature using fixed units like px, em, or rem.
<percentage> Defines the radius relative to the dimensions of the element's border box.

Code Examples

A basic example showing a blue rectangle with all four corners rounded by 20 pixels.

<div style="width: 200px; height: 100px; background-color: #007bff; border-radius: 20px;"></div>

An advanced example using JavaScript to toggle an element between a square and a circle by changing the border-radius.

<div id="profileCard" style="width: 150px; height: 150px; background-color: #333333; border: 5px solid #ffcc00; transition: border-radius 0.3s;"></div>
<button onclick="makeCircle()">Toggle Shape</button>
<script>
function makeCircle() {
  const card = document.getElementById("profileCard");
  if (card.style.borderRadius === "50%") {
    card.style.borderRadius = "0px";
  } else {
    card.style.borderRadius = "50%";
  }
}
</script>

Pro Tip

To create a perfect pill-shaped button that doesn't turn into an oval when the text grows, use a very large pixel value like 999px instead of a percentage. This keeps the ends perfectly semi-circular regardless of how wide the button becomes.

Deep Dive

Think of border-radius like a carpenter sanding down the sharp corners of a wooden block. When you apply this property, you are essentially placing a circle or an ellipse into the corner of the element and clipping everything outside that curve. You can specify one value to apply to all four corners, or up to four values to target each corner individually starting from the top-left and moving clockwise. If you use a forward slash, you can define separate horizontal and vertical radii to create asymmetrical or elliptical curves. This property doesn't just affect the border; it also clips the background color and images to fit the new shape.

Best Practices

Use relative units like rem for corner rounding if you want the aesthetic to scale with the user's font size settings. For UI elements like buttons and cards, keep the radius consistent across your application to maintain a unified design language. If you are creating a circular profile image, ensure the element is a square and use a 50% value.

Common Pitfalls

A common mistake is using 50% on a rectangular element expecting a circle; this will result in an oval. Another issue is that border-radius does not automatically apply to child elements if they overflow the parent. You must set overflow: hidden on the parent to ensure children are clipped to the curved corners.

Accessibility

Rounding corners is largely an aesthetic choice, but avoid excessive rounding that might clip off text content or important visual indicators like focus outlines. Ensure that interactive elements like buttons still look clickable to users who rely on visual cues to understand functionality.

Dev Data Table: border-radius property

default 0
animatable yes
inherited no
experimental no
year_intro 2005
year_standard 2011
js_syntax_1 element.style.borderRadius = "20px";
js_syntax_2 element.style.setProperty("border-radius", "20px");
js_note In JavaScript, use camelCase for the property name or use the setProperty method with the standard CSS name as a string.
browsers { "Chrome": 4, "Edge": 9, "Firefox": 4, "Safari": 5, "Opera": 10.5, "Chrome Android": 18, "Safari on iOS": 5, "Samsung Internet": 1, "Opera Mobile": 11 }
results render here...