You are here

CSS curved corners

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 .

 

CSS curved corners

 

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 :-

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

 

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 :-


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 :-

End of the tutorial :

This tutorial is exclusive for www.grook.net

In this tutorial we talked about css curved corners , and how to make them in an easy way

 

Thanks

 

Author : Ibrahim Kettaneh - CSS curved corners