Export (0) Print
Expand All
top
Expand Minimize
This topic has not yet been rated - Rate this topic

borderRadius property

Specifies 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 5.1Internet Explorer 9

Syntax

Integer value = object.put_borderRadius(BSTR v);Integer value = object.get_borderRadius(BSTR* sRadius);

Property values

Type: BSTR

One to eight of either of the following values, separated by an optional slash ("/"):

length (length)

Floating-point number, followed by a supported length unit.

percentage (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.

String format

[ <length> | <percentage> ] {1,4} [ / [ <length> | <percentage> ] {1,4} ] ?

CSS information

Applies ToAll elements
Mediavisual
Inheritedno
Initial Value(see individual properties)

Standards information

Remarks

The IHTMLCSSStyleDeclaration::borderRadius 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 radius are given in the following order:

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.

For more information about the IHTMLCSSStyleDeclaration::borderRadius property and related properties, see How to Add Rounded Corners with CSS3.

Examples

Following is an example of a typical use for the IHTMLCSSStyleDeclaration::borderRadius property. Because there are two values after the IHTMLCSSStyleDeclaration::borderRadius property, the first value is the radius of the circle that defines the top-left and bottom-right corners of the element, and the second value is the radius of the circle that defines the top-right and bottom-left corners of the element.


div.rounded {
  width: 800px;
  height: 600px;
  border: solid black 10px;
  border-radius: 15px 10px 
}


This example appears as follows in Internet Explorer 9 and later.

A screen shot of a rectangle with a thick black border and rounded corners

The following two selectors are equivalent; they produce identical results.


div.shorthand {
  border-radius: 40px;
}

div.all4properties {
  border-top-left-radius: 40px;
  border-top-right-radius: 40px; 
  border-bottom-right-radius: 40px;
  border-bottom-left-radius: 40px;
}

The following two selectors are also equivalent.


div.shorthand2 {
  border-radius: 2em 1em 4em / 0.5em 3em;
}

div.all4properties2 {
  border-top-left-radius: 2em 0.5em;  
  border-top-right-radius: 1em 3em;
  border-bottom-right-radius: 4em 0.5em;
  border-bottom-left-radius: 1em 3em;
}

Requirements

Minimum supported client

Windows Vista with SP1, Windows 7 [desktop apps only]

Minimum supported server

Windows Server 2008 R2 [desktop apps only]

Header

Mshtml.h

IDL

Mshtml.idl

DLL

Mshtml.dll

See also

Demos
IE Test Drive: Border Radius
IE Test Drive: IE Logo
Conceptual
How to Add Rounded Corners with CSS3
Internet Explorer 9 Guide for Developers: CSS3 Backgrounds and Borders Module
Reference
IHTMLCSSStyleDeclaration::borderTopRightRadius
IHTMLCSSStyleDeclaration::borderBottomLeftRadius
IHTMLCSSStyleDeclaration::borderBottomRightRadius
IHTMLCSSStyleDeclaration::borderTopLeftRadius

 

 

Did you find this helpful?
(1500 characters remaining)
Thank you for your feedback

Community Additions

ADD
Show:
© 2014 Microsoft. All rights reserved.