Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Feb 2012
    Posts
    11
    Thanks
    4
    Thanked 0 Times in 0 Posts

    curved containers.

    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.

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    the website you provided used images for the corners, however you can do accomplish the same thing in css:

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

  • #3
    New Coder
    Join Date
    Feb 2012
    Posts
    11
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks alot. Sorry if this is ridiculous or really simple, but could you direct me as to where exactly this code should go.

  • #4
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    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).

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

  • Users who have thanked Sammy12 for this post:

    s024201 (02-07-2012)

  • #5
    New Coder
    Join Date
    Feb 2012
    Posts
    11
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Yeh it worked, thanks alot. If I wanted to accentuate the curve I take it i'd just play around with the px.

  • #6
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    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...der-radius.asp

  • #7
    Regular Coder Kevin_M_Schafer's Avatar
    Join Date
    Apr 2011
    Location
    Fairfax, Minnesota, U.S.A.
    Posts
    482
    Thanks
    97
    Thanked 17 Times in 17 Posts
    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

    .
    My keyboard is an IBM from 1993 and I like it that way. | Who is Dan Well? Everyone always says I know Dan Well.Building a web page is like building a birdhouse. Put it up there and watch 'em come. | Maintaining the aspect ratio of an image is more important than having a cold orange pop.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •