Rounded Corners

How do you make them?

It's really simple. All you need to do is create a div around the content you wish to use to make rounded corners. Let's call it "text"

	
	<div id="text"> 
  <p> This box has rounded corners </p>
 </div>
	

Now, just style the div in your css by using the border-radius property.

	
		 #text {
			border-radius: 20px;
			}
	

Don't forget - you need to use a couple different prefixes for full broswer support!

Mozilla Firefox use -moz-

Safari use -webkit-

	
		#text {
			-moz-border-radius: 35px;
			-webkit-border-radius: 35px;
			}
	
	

Breaking it down!

The border-radius property can be rendered either by using lenghts (pixels) or percentages.

	#text { border-radius: 15px;
	}
	
	-OR-
	
	#text2 { border-radius: 95%;
	}

The border-radius property can be created using short hand, like the previous examples. However, you can also create individual rounded corners.

	#text { 
		border-bottom-right-radius: 60px;
		}

Or every corner can be expressed individually like this:

	#text { border-radius: 5px 10px 5px 10px;
		}