Caution

JavaScript is disabled in your browser.
This site uses JavaScript for features such as search.
For the best experience, please enable JavaScript before browsing this site.

CSS Dictionary

Home
CSS Dictionary
border-bottom-right-radius

border-bottom-right-radius

Specifies the radius of the bottom-right corner of an element.

You can specify the horizontal and vertical radii of the corner separately by separating them with a space. If the space is omitted, a uniform radius (perfect circle) is used.

Sample Code

style.css

/* 50% circular corner */
div.test { border-bottom-right-radius: 50%;}

/* Elliptical corner: horizontal 50px, vertical 25px */
div.test1 { border-bottom-right-radius: 50px 25px;}

/* Pixel value */
div.test2 { border-bottom-right-radius: 8px;}

/* No rounding (default) */
div.test3 { border-bottom-right-radius: 0;}

/* Only the bottom-right corner is rounded */
.rounded-bottom-right {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	border-bottom-right-radius: 40px;
	border-bottom-left-radius: 0;
}

/* Comparison: shorthand vs. individual property */
div.shorthand { border-radius: 0 0 20px 0;}          /* Only bottom-right */
div.longhand  { border-bottom-right-radius: 20px;}

Available Values

Value	Description
Number	Specifies a numeric value. Common units are『px』and『%』. When using『%』, the reference is the element's size (border box). The default value is『0』.

Browser Preview

The background color of the samples below is『#00f』.

<div style="border-bottom-right-radius: 50%; background-color: #00f; margin: 0 auto; width: 100px; height: 100px;"></div>

<div style="border-bottom-right-radius: 50px 25px; background-color: #00f; margin: 0 auto; width: 100px; height: 100px;"></div>

Browser Compatibility

Desktop

Chrome

4+ ○

3 △

2 △

1 △

↑ Requires prefix『-webkit-』

Firefox

4+ ○

3 △

2 △

1 △

↑ Supported as『-moz-border-radius-bottomright』

Safari

5+ ○

4 △

3 △

↑ Requires prefix『-webkit-』

2 and below ×

Edge

12+ ○

11 ○

10 ○

9 ○

8 ×

7 ×

6 ×

Opera

10.5+ ○

9 and below ×

Mobile

iOS Safari

4.2+ ○

3 △

2 △

1 △

↑ Requires prefix『-webkit-』

Android Browser

4.4+ ○

3 and below ×

Chrome Android

Latest ○

Same support as desktop version

Firefox Android

Latest ○

Same support as desktop version

※ Version information is based on MDN / Can I Use.

Notes

Specifies the radius of the bottom-right corner of an element.

When using『%』, the reference value is the element's size (border box).

You can set the horizontal and vertical radii individually by separating them with a space. The value before the space is the horizontal radius, and the value after is the vertical radius. This allows the corner to be rounded with an ellipse rather than a perfect circle. If the space is omitted, a uniform radius (perfect circle) is used.

/* div { border-bottom-right-radius: horizontal vertical;} */
div.test { border-bottom-right-radius: 50% 25%;}

Note that some older Android stock browsers have a bug where specifying a『%』value for『border-bottom-right-radius』may not render correctly.

If you find any errors or copyright issues, please contact us.

Home