...

View Full Version : curved containers.



s024201
02-07-2012, 10:05 PM
Hi. My brother has been doing web design for a while now and with his help I am beginning to learn quite alot. He is now at the point where he'll show me a website then I will have to recreate it exactly how it is. The website I'm trying to do at the moment is the following www.heartfinancialservices.co.uk I dont understand how he has achieved the curved borders. Any help would be appreciated.

Sammy12
02-07-2012, 10:09 PM
the website you provided used images for the corners, however you can do accomplish the same thing in css:



#curved {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
}

s024201
02-07-2012, 10:13 PM
Thanks alot. Sorry if this is ridiculous or really simple, but could you direct me as to where exactly this code should go.

Sammy12
02-07-2012, 10:24 PM
I made a mockup: stick this into a new html file. The border-radius should go on the element in which you want curved corners (as I demonstrated below).



<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.container {
width: 100px;
height: 100px;
background: #333;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="container">

</div>
</body>
</html>

s024201
02-07-2012, 10:37 PM
Yeh it worked, thanks alot. If I wanted to accentuate the curve I take it i'd just play around with the px.

Sammy12
02-07-2012, 10:41 PM
Just a heads up, the website you provided used an image for curves, which will work in all browsers. The border-radius will only work in: IE9+, Firefox 4+, Chrome, Safari 5+, and Opera.

Barely anyone uses a browser below these, except for ie6-8. In these browsers there will be no rounded corners. On the plus side, you don't want to have to use images everytime you want something rounded, images take time to load, and it costs more money to load them. For this reason, everyone uses border-radius instead

http://www.w3schools.com/cssref/css3_pr_border-radius.asp

Kevin_M_Schafer
02-07-2012, 11:01 PM
Hi there Sammy. Cool quote.


images take time to load, and it costs more money to load them

You're saying time is money. How true.

Thanks.

--Kevin

.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum