View Full Version : curved containers.

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.

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;

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.

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>
<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;
<div class="container">


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.

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


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.