WebD3

Web Development Tutorials From Beginner To Advance

  • Email
  • Twitter
  • RSS-Button
  • You are here: 
  • Home
  • Rounded Corners Using CSS3

Rounded Corners Using CSS3

Posted on June 24th, 2010 John Casey

Difficulty: Medium

Estimated completion time: 5 Minutes

Language: CSS3

CSS3 is the currently in development newer version of CSS. In essence the code is the same just with some newer properties and values. Wikipedia describes it as…

CSS3 is modularized and will consist of several separate recommendations

In this tutorial I will tell you how you can easily give elements such as div’s or form inputs rounded corners in just a couple of simple lines of code.

First off we are going to start with a blank HTML5 page like below.

<!DOCTYPE HTML>
<html>
<head>
<title></title>
<style>
</style>
</head>
<body>

</body>
</html>

We are now going to add a div to the page and give it an id of box. Next add some basic CSS styling. Making the body background blue, the div centred, red and 200px by 200px.

<!DOCTYPE HTML>
<html>
<head>
<title></title>
<style>
body {
background: blue;
}
#box {
width: 200px;
height: 200px;
margin: auto;
background: red;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>

Now if you view this page in the browser you should have something like the image below.

 

 

 

 

 

 

 

 

 

 

As you can see the images are currently square. Now to make them rounded we simple add 2 lines of CSS. After our code now looks like this.

<!DOCTYPE HTML>
<html>
<head>
<title></title>
<style>
body {
background: blue;
}
#box {
width: 200px;
height: 200px;
margin: auto;
background: red;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>

You will notice that the 2 lines we have added are very similar, one is aimed at webkit browsers such as Safari and Chrome. The other line is for Mozilla Browsers such as Firefox. The reason they use different properties is because CSS3 has not officially been implemented yet, therefore browsers can have it however they want. Now if we run our code in the browser we should see rounded corners around our div.

 

 

 

 

 

 

 

 

 

 

 

Be aware that this effect will only be visible in browsers that have CSS3 enabled. These include Firefox 3, Google Chrome and Safari.

Filed under CSS |

Comments

Leave a Reply

Categories

Recent Posts

Meta

Copyright © 2010 WebD3.