The hidden power of border-radius

3rd
Feb
Circles and Curvy Shapes with CSS3

So hopefully after reading – Understanding CSS – Padding, Positioning and CSS3 – you understand the basics of CSS and have been experimenting with other properties. It is important to remember that some properties will allow you to achieve effects that aren’t necessarily stated. In this post we will explore the property border-radius and how it can be used to create circles, semi-cricles and quarter-circles. It also has the potential to produce some terrific designs using just CSS – no images.

The property

.round
{
    border-radius: 5px; /* all corners have a radius of 5px */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;

    border-radius: 5px 4px 3px 2px; /* corner values go clockwise so, first value is the top left, second, the top right, third, bottom right and fourth, bottom left */
}

Jean of Cats Who Code recently wrote an excellent article which included ways to achieve rounded corners in IE.

Circles

A filled circle

To render a circle using the border-radius property, simply set the border-radius value to half the width/height. Both width and height should be the same.

A beautifully rendered circle.

#circle
{
		width: 200px;
		height: 200px;
		background-color: #a72525;
		-webkit-border-radius: 100px;
}

A bordered circle

An unfilled circle with border

#circle
{
		width: 200px;
		height: 200px;
		background-color: #efefef; /* Can be set to transparent */
      	border: 3px #a72525 solid;
		-webkit-border-radius: 100px;
}

Due to the way border-radius doesn’t curve the filled area as well, values for border thickness work well up to 4-5px depending on the size of the circle.

Examples of circles with different borders

An unfilled circle with a dashed border

#circle
{
		width: 200px;
		height: 200px;
		background-color: #efefef; /* Can be set to transparent */
      	border: 3px #a72525 dashed;
		-webkit-border-radius: 100px 100px 100px 100px;
}

Semi Circles and Quarter Circles

Semi-circle

To create a semi circle, the width value most be half of the height value. The radius border for the top left and bottom left or top right and bottom right then have to have a value greater than that of the width. A semi-circle of the top and bottom section work much in the same way but with the height being half of the width and with the bottom right and bottom left or the top right and top left have values greater than the height

Look! A semi-circle

#semicircle
{
		width: 100px;
		height: 200px;
		background-color: #a72525;
		-webkit-border-radius: 200px 0 0 200px;
}

Quarter circle

Very simple to achieve, just set a corner value to the same value as the width/height.

A quarter circle.

#quartercircle
{
		width: 200px;
		height: 200px;
		background-color: #a72525;
		-webkit-border-radius: 200px 0 0 0;
}

With different borders

Same border techniques can be used.

Overlapping

By overlapping two circles you can create some interesting shapes. When overlapping make sure the shape on top has the same colour as the body background colour. You also need to use the position and z-index property to position one circle above the other. Z-index simply relates to layers. An element with a z-index of 1 will overlap an element with a z-index of 0 so long as they are positioned on top of each other.

Produce a wonderful arch effect

	#wrapper
	{
		width: 1000px;
		margin: auto;
		position: relative;
	}
	#circle
	{
		position: absolute;
		top: 100px;
		left: 0;
		z-index: 0;
		width: 200px;
		height: 200px;
		background-color: #a72525;
		-webkit-border-radius: 100px;
	}

	#circle1
	{
		position: absolute;
		top: 105px;
		left: 5px;
		z-index: 1;
		width: 200px;
		height: 200px;
		background-color: #efefef;
		-webkit-border-radius: 100px;
	}

Have some fun

These are just a couple effects that I managed to achieve. I am sure you could produce some exceptional art using these techniques. Why not give it a try? :)

Moon

A nice little crescent moon

Colour venn diagram

A Venn Diagram

  

Written by Liam McCabe

The almighty creator of CreativityDen. Loves every bit of design as well as going out with friends, playing golf and enjoying life!

Subscribe!

Discussion

Leave a comment