CSS border-top-left-radius Property

The border-top-left-radius property controls the curvature applied specifically to the element’s top‑left corner, changing that corner from a sharp 90° angle to a rounded curve. It affects how the border edge and the element’s background are rendered in that corner, so setting a curvature here only changes the single corner rather than all four. The visual result can be a simple circular arc or an elliptical shape depending on how the horizontal and vertical curvature are defined, allowing subtle variations in the corner’s appearance.

When the corner is rounded, painting and clipping behavior changes: the border stroke follows the curved outline instead of a square corner, and the element’s background is painted to respect that rounded outline unless other rules override it. That interacts with how backgrounds and foregrounds are clipped; for example, the element’s background painting may be constrained by background-clip settings, and content that would normally overflow the rectangular box can be visually cropped by the rounded corner while also interacting with the element’s overflow behavior.

In layouts with multiple rounded corners, adjacent corner radii are composed together: if the combined curvature would collide or overlap, the user agent will proportionally adjust the radii to produce a smooth, non‑overlapping outline. The property is often used in concert with shorthand and related border controls - for example, the overall corner shorthand border-radius and the element’s line and style settings defined by border - so designers can target a single corner or coordinate all corners for a consistent look. Practically, border-top-left-radius is a useful tool for refining UI details like cards, buttons, and badges where only one corner needs a rounded appearance.