Grains Of Sand Web Design, CSS Demos & HTML5 Templates by tupence

CSS3 Demos | border-radius

Create Curved Corners With CSS3 border-radius.

Not too long ago, if you wanted to include nice rounded corners for the borders in your website design you needed to fire up Photoshop and create suitable images. Then along came CSS3. Now using the border-radius property, with a few lines of code you can create rounded corners without any images.

Syntax

To use border-radius you must define the position and the size (as either a fixed unit or a percentage) of the required curve.

Longhand
border-top-left-radius: [length or %];
border-top-right-radius: [length or %];
border-bottom-right-radius: [length or %];
border-bottom-left-radius: [length or %];

Shorthand
border-radius: [length or %] [length or %] [length or %] [length or %]; -- (top right bottom left) if all curves are different
border-radius: [length or %] [length or %]; -- top right & bottom left the same size, top left & bottom right the same
border-radius: [length or %]; -- all corners the same size curve

Usage

border-radius: 10px; -- 10px curve to each corner.
border-top-right-radius: 100%; -- 100% curve to the top right corner
border-radius:10px 10px 20px 20px; -- 10px curve to the top corners and a 20px curve to the bottom corners

Examples and Code

DEMO 1 - All Corners Equal Curves

All the corners have a 30px curve

section#curved{
-webkit-border-radius:30px;
-moz-border-radius:30px;
border-radius:30px;
}

DEMO 2 - Top Two Corners Curved

Only the top corners have a curve, this time of 20px

section#part-curve{
-webkit-border-radius:20px 20px 0 0;
-moz-border-radius:20px 20px 0 0;
border-radius:20px 20px 0 0;
}

DEMO 3 - Two Small and Two Large Curves

The two right corners have a larger curve than the left

section#part2{
-webkit-border-radius:20px 120px 120px 20px;
-moz-border-radius:20px 120px 120px 20px;
border-radius:20px 120px 120px 20px;
}

DEMO 4 - Create A Quadrant

The top right corner has a 100% curve
NOTE: Will not work in IE8 or earlier

  • section#quadrant{
  • -webkit-border-top-right-radius: 0 100% 0 0;
  • -moz-border-top-right-radius: 0 100% 0 0;
  • border-radius: 0 100% 0 0;
  • height:200px;
  • width:300px;
  • }

DEMO 5 - Create A Circle

Make a circle

  • section#circle{
  • /*set the width and height the same*/
  • width:200px;
  • height:200px;
  • /*border-radius should be half the width*/
  • -webkit-border-radius: 100px;
  • -moz-border-radius: 100px;
  • border-radius:100px;
  • }

DEMO 6 - Overlapping Circle

Create three overlapping circles from an unordered list. NOTE: this doesn't seem to work in IE8 or earlier

HTML

  • /*we use a simple unordered list to create the circles*/
  • <ul class="circles">
  • <li></li>
  • <li></li>
  • <li></li>
  • </ul>

CSS

  • ul.circles{
  • width: 900px;
  • overflow: hidden; /*to clear the floats used below*/
  • list-style-type: none; /*remove the bullet point*/
  • }
  • /**Create the circles - each has the same basic styling**/
  • ul.circles li{
  • float: left; /*places the list items in a line*/
  • opacity: .8; /*allow part of the adjoining circle to show through*/
  • /*height and width should be the same*/
  • width: 200px;
  • height: 200px;
  • /*the border-radius should be half the height & width*/
  • -webkit-border-radius: 100px;
  • -moz-border-radius: 100px;
  • border-radius: 100px;
  • }
  • /*Now we add colour and positioning to each circle using nth-child*/
  • ul.circles li:first-child{
  • background-color: #9e52e6;
  • }
  • ul.circles li:nth-child(2){
  • background-color: #16683d;
  • margin-left: -60px; /*use negative left margin to place this circle partly over circle 1*/
  • }
  • ul.circles li:nth-child(3){
  • background-color: #ff0000;
  • margin-left: -60px; /*use negative left margin to place this circle partly over circle 2*/
  • }

Browser Support and prefixes

Support

  • Opera -- full support since version 10.5
  • Firefox -- full support since version 4
  • Chrome -- full support since version 5
  • Safari -- full support since version 5
  • Internet Explorer...
       IE9 -- full support
   IE8 and earlier -- requires CSS3Pie

Prefixes

  • Older versions of some browsers will work with the following prefixes...
  • Firefox: -moz-border-radius
  • Chrome and Safari: -webkit-border-radius

More CSS3 Demos This Way