Home Library Learn Downloads Support Community
Sign in | United States - English | |
5 out of 12 rated this helpful - Rate this topic

border-radius property

[This documentation is preliminary and is subject to change.]

Sets or retrieves one or more values that define the radii of a quarter ellipse that defines the shape of the corners for the outer border edge of the current box.

CSS Backgrounds and Borders Module Level 3, Section 4.4

Syntax

border-radius: radius | percentage

Property values

A variable of type String that specifies or receives one or two radius values.

radius

A floating-point number, followed by either an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px). For more information about the supported length units, see CSS Values and Units Reference.

percentage

An integer, followed by a %. The value is a percentage of, for horizontal radii, the width of the border box, or, for vertical radii, the height of the border box.

CSS information

Applies ToAll elements
Mediavisual
Inheritedno
Initial Value

Standards information

Remarks

The border-radius property is a composite property that specifies up to four border-*-radius properties. If values are given before and after the slash, the values before the slash set the horizontal radius and the values after the slash set the vertical radius. If there is no slash, the values set both radii equally. The four values for each radii are given in the following order: top-left, top-right, bottom-right, bottom-left. If the bottom-left value is omitted, the value is the same as the top-right value. If the bottom-right value is omitted, the value is the same as the top-left value. If the top-right value is omitted, the value is the same as the top-left value.

See also

CSSStyleDeclaration
currentStyle
style
defaults
runtimeStyle
Reference
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius
border-top-left-radius

 

 

Build date: 3/13/2012

Did you find this helpful?
(1500 characters remaining)
Community Content Add
Annotations FAQ
Read The Documentation
In oppostion to the Mozilla Developer Network , MS has a great documentation. Mozilla Network can take a leaf out of MS book In most cases border radius is not rendered because IE is running in Quirks Mode. Force it to run in IE9 mode with HTML 5 doctype declaration <!DOCTYPE html> or white the meta tag <meta http-equiv="X-UA-Compatible" content="IE=9" /> but i also have a problem with fieldset elements where a legend element is nested. then the border radius isnt rendered, Perhaps in the next IE version but this version brought a lot of progress
History
Buggy
Border radius seems to not work under certain circumstances or rather under certain parent tags it seems. For example it does not appear to work on input:text tags in a Fieldset. Come on MS, you're losing ground rapidly on some very simple things
History
It's temperamental
I found it doesn't work with some combinations of elements. For example, a fieldset with a legend child won't show the round corners.  In this combination, replacing the legend with a div and moving it using relative positioning may be a workaround.
History
works for me
Hey, REALLY!, I have border-radius working just fine in IE 9 RTM. I first tried with -ms- on the front like -moz- and -webkit- but that failed. Plain border-radius is fine.
History
REALLY!
Just confirmed, border radius does not work in IE9.  COME ON, get it together MS!!
History
doesn't work for me
I just upgraded to IE 9 and border-radius isn't working (specifically border-bottom-left/right-radius)

here's my code for the main container div that wraps all of my output content for an entire page

#container {
    border: 1px solid black;
    background-color: white;
    width: 1100px;
    margin: 20px auto 50px auto;
    -moz-box-shadow: -10px 10px 30px black;
    -webkit-box-shadow: -10px 10px 30px black;
    box-shadow: -10px 10px 30px black;
    /* below is #container border radius code */
    -moz-border-radius-bottomleft: 10px;
    -moz-border-radius-bottomright: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
History
Nice button with hover
$0$0 $0 $0An exemple of border radius with a Button :$0 $0$0 $0$0 $0$0 $0
$0 $0 $0
<style type="text/css">
button{
width: 80px;
height: 40px;
background-color: #465272;
color: #FFFFFF;
border: 2px blue outset;
border-radius: 8px;
filter:progid:DXImageTransform.Microsoft.DropShadow(OffX=1, OffY=1, Color='#000000', Positive='true');
}

button:hover{
border: 2px blue inset;
}
</style>
<button>Click me !</button>
$0
History