Curve the top-left corner in px, pt, em or %.
Syntax
border-top-left-radius: length [length] ;
Two length values can be supplied for horizontal and vertical radius, if one value is supplied it will be used for both.
The border-style property must be set for the border-radius properties to have any effect.
Examples:
h1 { border-top-left-radius: 40px 10px; }
.emw3class { border-top-left-radius: 12%; }
#emw3id { border-top-left-radius: 0.5em; }
Try it:
This is a sample of text with a CSS border. By default each corner will be square but this can be rounded by applying a CSS radius. |
(CSS 3) Browser Support: IE 9+ , Firefox 4+, Chrome, Safari 5+, and Opera.
“The reason most people never reach their goals is that they don't define them, learn about them, or even seriously consider them as believable or achievable. Winners can tell you where they are going, what they plan to do along the way, and who will” ~ Denis Waitley
Related:
border-top-left-radius - MDN Web Docs.
border-top-right-radius - Curve the top-right corner.
border-bottom-left-radius - Curve the bottom-left corner.
border-bottom-right-radius - Curve the bottom-right corner.
border-radius - Shorthand to set all four border-*-radius properties.