CSS border-bottom-right-radius Property

This property defines the radius of the bottom-right corner of an element's outer border edge.

selector { border-bottom-right-radius: value; }

<length>	Defines the radius using fixed distance units like px, em, or rem.
<percentage>	Defines the radius as a percentage of the width and height of the box.

Code Examples

A simple green box with a 40-pixel rounded bottom-right corner.

<div style="width: 200px; height: 100px; background-color: #4CAF50; border-bottom-right-radius: 40px;"></div>

An interactive card that uses JavaScript to animate the bottom-right radius and change the border color.

<div id="card" style="width: 300px; padding: 20px; border: 2px solid #333333; transition: border-bottom-right-radius 0.5s;">
  <p>Interactive Card</p>
  <button onclick="applyRadius()">Round Corner</button>
</div>
<script>
function applyRadius() {
  const card = document.getElementById("card");
  card.style.borderBottomRightRadius = "100px";
  card.style.borderColor = "#007BFF";
}
</script>

Pro Tip

You can create a teardrop or leaf shape by only applying a large radius to one or two diagonal corners while keeping the others at zero. It is a great way to make unique UI elements without needing custom SVG shapes.

Deep Dive

Think of this property as a way to sand down the sharp corner of a box. By default, corners are square. When you apply a radius, you are defining the shape of the arc that replaces that corner. You can provide one value for a circular arc or two values to create an elliptical curve. The first value defines the horizontal radius and the second defines the vertical. If the element has a background or a border, those will follow the curve of the radius. If you use the overflow: hidden property, any content inside the box that hits that corner will be clipped to the curve.

Best Practices

Keep your UI consistent by using the same radius values across similar components. Use relative units like rem if your design needs to scale with the user's font size settings. If you are building a responsive card or container, percentages can help maintain the look across different screen sizes.

Common Pitfalls

The radius will not apply to table elements that have border-collapse set to collapse. Also, keep in mind that if the radius value is larger than the dimensions of the box, the browser will automatically reduce the radius to fit within the available space without overlapping other corners.

Accessibility

Rounding corners is purely aesthetic and rarely impacts accessibility. However, ensure that the curve does not clip off important text or focus indicators when using overflow: hidden. High-contrast outlines for focus states should still be clearly visible around the curved edge.

Dev Data Table: border-bottom-right-radius property

default	0
animatable	yes
inherited	no
experimental	no
year_intro	2005
year_standard	2011
js_syntax_1	element.style.borderBottomRightRadius = "20px";
js_syntax_2	element.style.setProperty("border-bottom-right-radius", "20px");
js_note	When using the style object in JavaScript, the property name must be written in camelCase as borderBottomRightRadius.
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 }