Curve the top-left corner in px, pt, em or %.

      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.

h1 { border-top-left-radius: 40px 10px; }
.ss64class { border-top-left-radius: 12%; }

#SS64id { 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


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

© Copyright 1999-2014
Some rights reserved