The border-top-left-radius
property is used to round the top left corner of an element.
The property takes in one or two values that define the radii of a quarter ellipse that defines the shape of the corner of the outer border edge (see the diagram below). The first value is the horizontal radius, the second the vertical radius. If the second value is omitted it is copied from the first. If either length is zero, the corner is square, not rounded. Percentages for the horizontal radius refer to the width of the border box, whereas percentages for the vertical radius refer to the height of the border box. Negative values are not allowed.
The curvature of the corner does not have to be perfectly circular. When only one value is specified and the other is copied from the one that is specified, the result will be a circular curve; i.e, an arc of a circle is used as a border.
But when two values are specified and they are not equal, the result is an elliptical curve; i.e, an arc of an ellipse is used as a border.
Trivia & Notes
If the element has a background color or a background image, the background will also be clipped to the border radius specified.
However, sometimes the background color of an element may “leak” outside the curvature of the border when it is rounded. To fix that, you can use the background-clip
property and set its value to padding-box
.
.element { border-radius: 30px; background-clip: padding-box; }
If an element has a border image, the border image is not clipped to the curve of the rounded corners.
The content of the element may overflow the element on the corners that are rounded if the element does not have enough padding to “push” the content inwards. (See image below)
This example adds appropriate padding, so that the contents do not overflow the corners. Note that there is no border, but the background will still have rounded corners.
.element { background: black; color: white; border-radius: 1em; padding: 1em; }
Also, The area outside the curve of the border edge does not accept pointer events on behalf of the element.
Official Syntax
-
Syntax:
border-top-left-radius: [ <length> | <percentage> ]{1,2}
- Initial: 0
-
Applies To: all elements (but browsers are not required to apply to
table
andinline-table
elements whenborder-collapse
iscollapse
. The behavior on internal table elements is undefined for the moment.) - Animatable: yes, as two values of length, percentage, or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
Values
The unofficial syntax looks like this:
border-top-left-radius: [horizontal radius] [vertical radius]?;
Each of the radii can be a <length>
or <percentage>
value.
Percentages for the horizontal radius refer to the width of the border box, whereas percentages for the vertical radius refer to the height of the border box. Negative values are not allowed.
The question mark (?) indicates that the second radius’ value is optional. If it is omitted, it is copied from the first one.
- <percentage>
-
See the
<percentage>
entry for a list of possible values. - <length>
-
See the
<length>
entry for a list of possible values.
Examples
border-top-left-radius: 50%; border-top-left-radius: 30px; border-top-left-radius: 100px 50px; border-top-left-radius: 20% 30%;
Browser Support
CSS3 Border-radius (rounded corners)
Method of making the border corners round. Covers support for the shorthand `border-radius` as well as the long-hand properties (e.g. `border-top-left-radius`)
W3C Candidate Recommendation
Supported from the following versions:
Desktop
- 5
- 50
- 9
- 10
- 5
Mobile / Tablet
- 4.0
- 2.2
- No
- 129
- 130
Further Reading
- Backgrounds and Borders Module Level 3
- The Humble Border Radius – Talk by Lea verou