CSS border-top-right-radius Property

This property defines the shape of the top-right corner of an element by rounding it.

selector { border-top-right-radius: [length | percentage] [length | percentage]?; }

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

Code Examples

A basic example showing a blue box with a 50px circular radius applied to the top-right corner.

<div style="width: 300px; height: 150px; background: #2196f3; border-top-right-radius: 50px; border: 4px solid #0d47a1;"></div>

An advanced example using an elliptical radius (two values) and JavaScript to toggle the corner shape dynamically.

<div id="dynamicCard" style="width: 300px; height: 200px; background: #eeeeee; border: 2px solid #333333; padding: 20px; transition: border-top-right-radius 0.3s ease;">
  <p>Click the button to morph the corner.</p>
  <button onclick="morphCorner()">Morph Corner</button>
</div>

<script>
function morphCorner() {
  const card = document.getElementById("dynamicCard");
  if (card.style.borderTopRightRadius === "80px 40px") {
    card.style.borderTopRightRadius = "0px";
  } else {
    card.style.borderTopRightRadius = "80px 40px";
  }
}
</script>

Pro Tip

You can create unique leaf-like shapes or organic UI by mixing different horizontal and vertical radii. For example, setting border-top-right-radius: 100% 50% gives you a much more stylized curve than a simple pixel value. This is a great way to break away from the "boxy" look of standard websites without using heavy images or complex SVG masks.

Deep Dive

Think of border-top-right-radius like a carpenter sanding down the sharp edge of a table corner. By default, every element on the web is a sharp rectangle. This property allows you to round off that specific top-right corner. If you provide one value, you get a perfect circular arc. If you provide two values, the first controls the horizontal stretch and the second controls the vertical, creating an elliptical curve. The browser calculates these curves to ensure the border and background of the element fit neatly within the new shape. If the element has a border, the curve is applied to the outer edge of that border, and the inner curve is adjusted automatically based on the border thickness.

Best Practices

Stick to rem or px for small UI elements like buttons to keep a consistent look across different screen sizes. If you want a specific corner to stay sharp for a tab-like appearance, explicitly setting the other corners to 0 is the way to go. Use percentages when you want the curve to scale relative to the size of the element itself, which is handy for fluid layouts. Always ensure the rounding does not interfere with the legibility of the text inside the container.

Common Pitfalls

A common headache occurs when you have a child element inside a container with rounded corners. The child's square corners will bleed over the rounded edge unless you set overflow: hidden on the parent. Also, keep in mind that if the radius value is larger than the width or height of the box, the browser will downscale the radius to fit, which might not look like what you intended. If you apply a very large radius to a small element, it might end up looking like a pill or a circle instead of a rounded square.

Accessibility

Rounded corners generally make UI elements feel more approachable and help the eye focus on content, but ensure the curve does not clip important text or interactive indicators. High-contrast outlines should still be visible if the element receives focus.

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

default	0
animatable	yes
inherited	no
experimental	no
year_intro	2005
year_standard	2011
js_syntax_1	element.style.borderTopRightRadius = "20px";
js_syntax_2	element.style.setProperty("border-top-right-radius", "20px");
js_note	In JavaScript, the property name must be camelCased when accessing the style object directly, or kebab-cased when using the setProperty method.
browsers	{ "Chrome": 4, "Edge": 12, "Firefox": 4, "Safari": 5, "Opera": 10.5, "Chrome Android": 18, "Safari on iOS": 5, "Samsung Internet": 1, "Opera Mobile": 11 }