SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2011
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    What is the best technique for rounded corners

    What is the best technique for rounded corners either with images or no images but should work with all common browsers at least starting with IE7

    Here is what i use

    Code:
    <html>
    <HEAD>
    	<TITLE>Title</TITLE>
    	<style type="text/css">
    BODY 
    {
    	font-family: Verdana;
    	background-color:green;
    	color:#0A0A0A;
    }
    .topcorners 
    { 
    
    	background: url(http://cdn.sitepoint.com/forums/images/topright.gif) no-repeat top right; 
    }
    .bottomcorners 
    {
    	background: url('images/bottomright.gif') no-repeat top right; 
    }
    
    .Content 
    {
    	width: 80%;
    	background-color: #ffffff;
    	margin-left:auto;
    	margin-right:auto;
    }
    .roundedcornerimg 
    {
       width: 20px;
       height: 20px;
    
    }
    
    	</style>
    
    </HEAD>
    <body>
    <div class="Content">
    	<div class="topcorners"><img src="images\topleft.gif"  class="roundedcornerimg"  /></div>
    	All content goes here
    	<div class="bottomcorners"><img src="images\bottomleft.gif"  class="roundedcornerimg"  /></div>
    </div>
    
    </body>
    </html>
    Sorry i don't have a link to this
    Do you guys have any better solutions ?

  2. #2
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    The method you are using is... flawed at best - Those images have NO business in your HTML...

    These days I'm using CSS3 for that sort of thing and to hell with IE8 and lower. They get square corners, OH WELL...

    Though when I do "need" support all the way back to IE5.5, I use this technique:
    http://www.cutcodedown.com/tutorials...ers/page1.html

    Which allows me to use a single image file (less handshakes so less load time issues), NOT put images in the markup (so CSS off the page isn't a disaster), etc, etc, etc...

    Remember, separation of presentation from content -- those images are presentation, and as such don't belong in IMG tags -- EVER.

    Oh, and don't forget to use a doctype so IE isn't in quirks mode, STOP typing in tags in uppercase like it's 1997, etc, etc...

  3. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    if you want to use shadows as well then you'll have to use the three image way prob. http://www.visibilityinherit.com/cod...corner-box.php

  4. #4
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Amsterdam, The Netherlands
    Posts
    167
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    What is the best technique for rounded corners either with images or no images but should work with all common browsers at least starting with IE7
    Currently, I'd say a technique described here: http://cssglobe.com/post/3714/css-sp...ounded-corners, for which you can make the one necessary small-disc sprite image here: http://www.pagecolumn.com/tool/roundcorner.htm.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,545
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Frank S View Post
    Currently, I'd say a technique described here: http://cssglobe.com/post/3714/css-sp...ounded-corners, for which you can make the one necessary small-disc sprite image here: http://www.pagecolumn.com/tool/roundcorner.htm.
    That's ok but uses one too many elements and too many classes for my liking . It doesn't work in IE6 either (at least the author doesn't know the right way to make it work in IE6) and you can't use absolutely placed corners in IE6 anyway as they will be 1px out on odd pixel widths. If you are not supporting IE6 then I'd probably drop support for 7 and 8 also and then use border radius.

    Or if you just want IE8+ support you can use the :before and :after pseudo elements to place two of the corners with the original element holding the third corner which means only one extra element is needed for the fourth corner.

    Round corners have always been a pain because of the extra elements needed. Using sptites is the best approach but if you want shadows and transparent corners then it soon gets complicated as Eric mentioned. I have an old demo here that uses two sprite images for shadows and transparent corners but is very heavy on mark up.

    In the end it all boils down to finding hooks to hang your background images on. You can find a round-up of techniques here but Deathshadow's and Erics methods are better than most you will find.

  6. #6
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,617
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    CSS3, and if rounded corners for older browsers is really necessary: http://css3pie.com

    Although, it's not wise to combine rounded corner fixes with javascript animations, as they won't work very well.
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  7. #7
    SitePoint Enthusiast
    Join Date
    Apr 2011
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks every one for your posts.

    Gotta say I prefer Frank's method.
    Eric's method is really easy but it goes only on fixed widths. I had some problems changing the "Eight Corners" according to my images, playing around with those pixels & getting it to work in Firefox. Thanks to Paul for the link to the round up of techniques.


Bookmarks

Posting Permissions

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