FANDOM


The border-radius property is used in CSS and some special HTML tags to create a rounded border of a particular object. This property's effect can only be seen in browsers which do not use WebKit as their web engine, like Internet Explorer. As of IE9 and Firefox 4, the border-radius property is supported. It will only create a border if there is a specific background-color/image on the object. Outlines and/or borders applied to the object will also be affected by the border radius. This property is a shorthand property for setting the individual properties of the border-top-left-radius, border-top-right-radius, border-bottom-left-radius, and border-bottom-right-radius properties. For functionality on other browsers, use the -moz-border-radius or -webkit-border-radius properties.

Values

Accepts one, two, three or four values, can optionally be followed by a slash (/) and a second set of values. Slashes are only supported in Gecko 2.0 (Firefox 4.0).

Value Description
<length> A length value which specifies the radius for the border. Examples of lengths are px, em, etc.
<percentage> A percentage value which specifies the radius of the border.

One value specifies the radius for all four borders. Two values specify the radius for the top left and top right, respectively, borders. Four value specify the radius of the top left, top right, bottom right, and bottom left borders, in that order.


HTML example:

<span style="background-color:white; color:black; border-radius:10px;">Check the radius</span>

That will make this: Check the radius.


CSS example:

h1 {
     background-color:white;
     color:black;
     border-radius:10px;
}



Image example:

Border-radius

border-radius in Chrome 6.0.472.63

Border-radius Example

Examples of border radius effects.

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.