The border-top-right-radius property controls the curvature of the element’s top-right corner by defining how much that corner is rounded instead of forming a sharp right angle. It effectively replaces the corner’s right angle with a smooth arc, altering the element’s outline, the way borders are drawn at that corner, and the silhouette that backgrounds and foreground content can follow. Because it targets a single corner, it gives fine-grained control over an element’s shape when you want asymmetrical rounding or distinct visual styles on different corners.

When multiple corner radii are present they combine to determine the final corner geometry; browsers ensure the arcs fit inside the element’s box and may proportionally scale radii when the combined corner radii would otherwise overflow the element’s dimensions. For managing several corners at once you can use the shorthand border-radius, which groups the four corner radius settings into a single declaration while still allowing individual override by corner-specific properties. Using a single-corner property like border-top-right-radius alongside other corner settings makes it easy to produce pill shapes, cut-corner effects, or bespoke rounded patterns without affecting the other corners.

The visual effect of a rounded corner extends beyond just the border line: backgrounds, box decorations, and hit areas are influenced by that contour. For example, the way a background is painted relative to the rounded edge can be impacted by background-clip, and shadows applied to the element will follow or respect the rounded outline created by the corner radius (see box-shadow). Because the corner changes the geometry of the element’s outer shape, it can also affect overflow clipping and how child content is masked at the corner, so designers often consider the radius together with layout, background, and decoration properties to achieve the intended visual result.