CSS border radius and round corners examples

CSS3 border-radius property can be used to make corners round of a block element. Border radius can have upto 4 values. Here is how a simple div with border-radius look like:

css-border-radius-example

CSS property border-radius

CSS version: CSS 3
Value: [length | percentage]{1,4}
Initial: 0 (individual properties)
Applies to: all elements
Inherited: no
Animatable: yes
Few points to note about border-radius property:

  1. border-radius 4 values: First value is for top-left radius, 2nd is for top-right, third is for bottom right and 4th is for bottom left.
  2. border-radius 3 values: Similar to 4 values situation except that 2nd value applies to bottom left corner also.
  3. border-radius 2 values: First value is for top-left and bottom right corner. 2nd value is for other two corners.
  4. border-radius 1 value: It applies to all 4 corners.
  5. Alternatively we can also use border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius. This may be useful in case we want to override one value defined in some other style sheet.

Example – border-radius with one value

<style type="text/css" media="screen">
.foo {
 width:100px; height:100px;
 background-color: lightgreen;
 border: 5px solid gray;
 border-radius: 20px;
}
</style>
<div class="foo"></div>
refresh

Example – border-radius with two values

<style type="text/css" media="screen">
.foo {
 width:100px; height:100px;
 background-color: lightgreen;
 border: 5px solid gray;
 border-radius: 20px 40px;
}
</style>
<div class="foo"></div>
refresh

Example – border-radius with 4 values

<style type="text/css" media="screen">
.foo {
 width:100px; height:100px;
 background-color: lightgreen;
 border: 5px solid gray;
 border-radius: 10px 20px 30px 40px;
}
</style>
<div class="foo"></div>
refresh

Example – border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius

<style type="text/css" media="screen">
.foo {
 width:100px; height:100px;
 background-color: lightgreen;
 border: 5px solid gray;
 border-top-left-radius: 10px;
 border-top-right-radius: 20px;
 border-bottom-right-radius: 30px;
 border-bottom-left-radius: 40px;
}
</style>
<div class="foo"></div>
refresh

Related

Specification and Browser compatibility

SpecificationStatusCategories
CSS3 Border-radius (rounded corners)W3C Candidate RecommendationCSS3
Desktop
ChromeFirefoxIEEdgeSafariOpera
Yes 5+ Yes 4+ Yes 9+ Yes 12+ Yes 5+ Yes 10.5+
Mobile
Android ChromeAndroid FirefoxiOS SafariIE MobileOpera Mobile
Yes 47+ Yes 44+ Yes 4.0-4.1+ Yes 10+ Yes 11+
source: caniuse.com
Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments