how to make curve corner using css

grookseo · 06-05-2011, 08: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 :-

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

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

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

End of the tutorial .

Source :- CSS Curved Corners

for more Tutorial , you can visit the source .

thanks

RoboticPro · 06-05-2011, 05:34 PM

You know that not every browser supports it?
Including the most used IE before version 9
so it's better to do a browser detection and
on that select your way to use it.

Milagros Kornre · 06-06-2011, 01:46 PM

I do not think this is supported in IE. Correct me if i am wrong

computerGeek · 06-06-2011, 03:19 PM

wow.. nice.. i just knew about this one today.. thanks a lot..!

PannaDraws · 06-07-2011, 09:02 AM

Actually it's not supported in IE... I usually check css3.info for the latest support news. Anyway, I also use a lot this to get nice rounded corners, or even circles.

d a v e · 06-07-2011, 10:27 AM

actually it is supportedin ie9 and10
http://caniuse.com/#search=border-radius.

goldenwaters · 06-09-2011, 10:21 AM

Weather it is supported by IE or not, the fact remains that, those of us who didnt know how to go about it have learned something new.
However, those who say it is not supported by IE should tell us what to do: Maybe we use Safari, Firefox of others.

Thanks,
Golden Waters.

rahmanpaidar · 06-09-2011, 10:55 AM

Nice tutorial. Thanks for sharing

PixelPusher · 06-09-2011, 06:27 PM

You will need to "-moz" prefix for FireFox for border radius. All other css3 supporting browsers will be fine with the standard property.

06-05-2011, 08:11 AM	#1
grookseo New Member Join Date: Jun 2011 Posts: 1	how to make curve corner using css 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 :- 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 :- 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 :- 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 :- End of the tutorial . Source :- CSS Curved Corners for more Tutorial , you can visit the source . thanks

06-06-2011, 01:46 PM	#3
Milagros Kornre New Member Join Date: Jun 2011 Posts: 5	I do not think this is supported in IE. Correct me if i am wrong __________________ Love Quotes \| Cute Love Quotes \| Sad Love Quotes \| Marriage Quotes \| Funny Love Quotes

06-06-2011, 03:19 PM	#4
computerGeek Silver Member Join Date: Mar 2011 Posts: 231	wow.. nice.. i just knew about this one today.. thanks a lot..! __________________ Custom Web Design for Businesses

06-07-2011, 09:02 AM	#5
PannaDraws New Member Join Date: Jun 2011 Posts: 1	Actually it's not supported in IE... I usually check css3.info for the latest support news. Anyway, I also use a lot this to get nice rounded corners, or even circles. __________________ PannaDraws http://pannadraws.com http://pannarajzol.hu

06-09-2011, 06:27 PM	#9
PixelPusher Super Moderator Join Date: Oct 2008 Location: Arizona, USA Posts: 1,053	You will need to "-moz" prefix for FireFox for border radius. All other css3 supporting browsers will be fine with the standard property. __________________ John Darling Graphic / Web Designer SmarterTools Inc. (877) 357-6278 www.smartertools.com

06-05-2011, 05:34 PM	#2
RoboticPro New Member Join Date: May 2010 Location: The Netherlands Posts: 15	You know that not every browser supports it? Including the most used IE before version 9 so it's better to do a browser detection and on that select your way to use it.

06-07-2011, 10:27 AM	#6
d a v e Platinum Member Join Date: Sep 2010 Posts: 509	actually it is supportedin ie9 and10 http://caniuse.com/#search=border-radius.

06-09-2011, 10:21 AM	#7
goldenwaters Bronze Member Join Date: Feb 2010 Location: Satellite-Town, Lagos, Nigeria, West-Africa. Posts: 89	Weather it is supported by IE or not, the fact remains that, those of us who didnt know how to go about it have learned something new. However, those who say it is not supported by IE should tell us what to do: Maybe we use Safari, Firefox of others. Thanks, Golden Waters.

06-09-2011, 10:55 AM	#8
rahmanpaidar Bronze Member Join Date: Jun 2011 Posts: 27	Nice tutorial. Thanks for sharing __________________ طراحی سایت \| دانلود فیلم سریال \| Web Design \| طراحی وب سایت

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode