SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2007
    Posts
    131
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Rounded corners, again.

    Hi,

    I know there are tons of threads on rounded corners, however a lot of them are old and I wanted to confirm what the current 'best practices' are.

    I was considering using the technique from roundedcornr.com, what are the biggest drawbacks / limitations of this approach?

    I plan on using rounded corners in my header as well as in some smaller panels inside my content.

    FYI - this is for a new site I'm designing, my older site (in sig) used a pure JS/CSS approach with no images, but I found it annoying and slow.

    All thoughts appreciated.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I know there are tons of threads on rounded corners, however a lot of them are old and I wanted to confirm what the current 'best practices' are.
    Whatever method you choose there is no getting away from the fact that if you want 4 rounded corners then you need 4 elements to hang them on.( If you want graphical sides then you need another 4 elements also.)

    You have to decide whether to use existing elements for some of the corners but this assumes that every time you use the corners then the format is the same. If you want a completely re-usable box then you have to use the full 4 elements to place the corners.

    Do not use any method that applies the corners absolutely as that will fail in ie and look very bad.

    This leaves you with nested elements or a variety of nested elements and empty divs.

    Apart from that there is nothing special about rounded corners and I don't know why so much fuss is made of it. It's just a matter of placing images into elements into the right places using standard css techniques. Nothing more nothing less

    The javascript methods have benefits in that the html is always kept clean and makes it easier to work on. However the drawbacks are that it does seem to slow the page down a bit more than a pure css version.

    I do have a rounded corner tutorial here but there are plenty of others around.

    There are always little bugs to work around but most methods are essentially the same.

  3. #3
    hi galen's Avatar
    Join Date
    Jan 2006
    Location
    New Haven, CT
    Posts
    1,228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can create rounded corners with 2 divs.

    I did it on my website galengrover.com

    here is a simplified version http://www.galengrover.com/lab/rounded-corners/

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by galen
    You can create rounded corners with 2 divs.
    Yes of course you can cap the top and bottom of a fixed width element but as a reusable box your method won't work .

    If the box is a fluid width (or you have many different boxes) then your method fails as it is a one-off method. There is nothing wrong with it but it isn't a multi purpose method because it relies on creating individual images for each box and can't be made to work on fluid elements.

    You can reduce the number of elements needed by using large images that contain 2 sides and one corner and the example I linked to does use such a method.

    There are some very good similar methods here.

  5. #5
    SitePoint Zealot
    Join Date
    Jul 2007
    Posts
    131
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the input.

    So my follow-up question is do you have recommendations for creating the images? I'm not much of a graphics guy and would love something that makes my life easier.

    Thanks.

  6. #6
    hi galen's Avatar
    Join Date
    Jan 2006
    Location
    New Haven, CT
    Posts
    1,228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    use the rounded corner rectangle tool in photoshop.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    There are a number of corner generators around but I haven't tried any though.


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
  •