PDA

View Full Version : how to make curve corner using css



grookseo
05 Jun 2011, 03:11 AM
In this tutorial , we will make css curved corners using a very easy and simple technique .

In the past , people used images to make a curved corners , but now we will make it without any image .

Let’s start how to make css curved corners :



First of all , I will make this HTML code :-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<title>css curved corners</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<link media="screen" type="text/css" rel="stylesheet" href="css-curved-corners.css" />

</head>

<body>

<div id="curved-corner-example">

</div>

</body>

</html>







Ok , now we won’t change the HTML , we will just change the css code



Make a css file (I called it css-curved-corners.css)

and put this code in it :-

#curved-corner-example {

height: 400px;

width: 150px;

background: #81b6b7;

margin: 25px auto;

padding: 8px;

}



And you will have something like that :-

http://www.grook.net/sites/default/files/images/isk/1-curved.jpg
Ok , now we want to make curved corners , so just add this line into out css code



border-radius: 20px 20px 20px 20px;



and our CSS code will be :



#curved-corner-example {

height: 400px;

width: 150px;

background: #81b6b7;

margin: 25px auto;

padding: 8px;

border-radius: 20px 20px 20px 20px;

}

And it will be something like that

And you will have something like that :-
http://www.grook.net/sites/default/files/images/isk/2-curved.jpg

Ok now we want to make some changes , I want to curve some corners more than the others . so I’ll change the css code into this :



#curved-corner-example {

height: 400px;

width: 150px;

background: #81b6b7;

margin: 25px auto;

padding: 8px;

border-radius: 20px 2px 20px 2px;

}



As you see , 2 corners are curved with 20px radius , and the others are curved with 2px radius .



And it will be :-

And you will have something like that :-

http://www.grook.net/sites/default/files/images/isk/3-curved.jpg
Finally , you can combine this technique with other techniques we used in previous lesson , I’ll combine it with shadow and border , so our code will be :-



#curved-corner-example {

height: 400px;

width: 150px;

background: #81b6b7;

margin: 25px auto;

padding: 8px;

border-radius: 20px 2px 20px 2px;

border-style:solid;

border-width:1px;

-moz-box-shadow: 3px 3px 10px #000;

-webkit-box-shadow: 3px 3px 10px #000;

box-shadow: 3px 3px 10px #000;

}

and the result :-

And you will have something like that :-

http://www.grook.net/sites/default/files/images/isk/4-curved.jpg

End of the tutorial .

Source :- CSS Curved Corners (http://www.grook.net/forum/web-development/css-curved-corners)

for more Tutorial , you can visit the source .

thanks