The border-top-left-radius
CSS property rounds the top-left corner of an element.
The rounding can be a circle or an ellipse, or if one of the value is 0,
no rounding is done and the corner is square.
A background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the background-clip
property.
border-radius
shorthand property that is applied to the element after the border-top-left-radius
CSS property, the value of this property is then reset to its initial value by the shorthand property./* the corner is a circle */ /* border-top-left-radius: radius */ border-top-left-radius: 3px; /* the corner is an ellipse */ /* border-top-left-radius: horizontal vertical */ border-top-left-radius: 0.5em 1em; border-top-left-radius: inherit;
With one value:
<length>
or a <percentage>
denoting the radius of the circle to use for the border in that corner.With two values:
<length>
or a <percentage>
denoting the horizontal semi-major axis of the ellipse to use for the border in that corner.<length>
or a <percentage>
denoting the vertical semi-major axis of the ellipse to use for the border in that corner.<length-percentage>
<length>
data type. Percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. Negative values are invalid.<length-percentage>{1,2}where
<length-percentage> = <length> | <percentage>
Live example | Code |
---|---|
An arc of ellipse is used as the border div { border-top-left-radius: 40px 40px; } | |
An arc of ellipse is used as the border div { border-top-left-radius: 40px 20px; } | |
The box is a square: an arc of circle is used as the border div { border-top-left-radius: 40%; } | |
The box is not a square: an arc of ellipse is used as the border div { border-top-left-radius: 40%; } | |
The background color is clipped at the border div { border-top-left-radius:40%; border-style: black 3px double; background-color: rgb(250,20,70); background-clip: content-box; } |
Specification | Status | Comment |
---|---|---|
CSS Backgrounds and Borders Module Level 3 The definition of 'border-top-left-radius' in that specification. | Candidate Recommendation | Initial definition |
Initial value | 0 |
---|---|
Applies to | all elements; but User Agents are not required to apply to table and inline-table elements when border-collapse is collapse . The behavior on internal table elements is undefined for the moment.. It also applies to ::first-letter . |
Inherited | no |
Percentages | refer to the corresponding dimension of the border box |
Media | visual |
Computed value | two absolute <length> s or <percentage> s |
Animation type | a length, percentage or calc(); |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 4
|
12
|
4
|
9 | 10.5 | 5
|
Percentages | 4 | 12 | 4
|
9 | 10.5 | 5 |
Ellipitcal corners | 1 | 12 | 3.5 | 9 | 10.5 | 3 |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | ? | ? | Yes
|
Yes
|
? | ? | ? |
Percentages | ? | ? | Yes | Yes | ? | ? | ? |
Ellipitcal corners | ? | ? | Yes | Yes | ? | ? | ? |
The border-radius-related CSS properties: the CSS shorthand border-radius
, the properties for the other corners: border-top-right-radius
, border-bottom-right-radius
, and border-bottom-left-radius
.
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-left-radius