...

View Full Version : how to curve corners



iaaan
11-07-2011, 03:07 PM
hi, i am learning how to code html and css and i am stuck on how to curve corners of certain parts of my page. for example i want to curve the edges on the container than holds my site. ive started from a basic dreamweaver template im working on but i cant figure out how to make it work..
can someone pleaaaase help me.
would be greatly appreciated!

Excavator
11-07-2011, 04:08 PM
Hello iaaan,
CSS3 can do rounded corners but it's not widely supported yet. Image based corners are how it's normally done. Have a look at some demos -

one (http://nopeople.com/CSS%20tips/rounded%20corners/index.html)
two (http://nopeople.com/CSS%20tips/rounded%20corners%20-%20CSS%20only/index.html)
a CSS3 demo (http://nopeople.com/CSS%20tips/CSS%203%20stuff/index.html)

resdog
11-07-2011, 07:05 PM
you can also use jquery:

http://jquery.malsup.com/corner/

iaaan
11-08-2011, 02:30 AM
thanks guys. still unsure as to how i impliment jquery into my html or css. any hints or tutorials i can look at?
i really need help on code placement.

Hoatzin
11-08-2011, 04:00 PM
the easiest way to make rounded corners is in css3 using border-radius.

in html make a div tag with id container.

<div id="container">
website content goes here.
</div>

and in css do.


#container {
height:600px;
width:800px;
margin:0 auto;
border-radius:10px;
background-color:red;
}

this gives you a red box width rounded corners. homever it's still not supported amongst all browsers.

felgall
11-08-2011, 06:23 PM
Using border-radius will give you rounded corners in all popular browsers except for IE8 and earlier.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum