Fluid Rounded Boxes - How do You do Them?

Discussion in 'CSS' started by Masterful, Oct 21, 2009.

  1. #1
    I've just gone through a thousand different tutorials explaining how to produce a fluid box with rounded corners. I'm looking for a method that's not as heavy on the markup as my one. My method is CSS-based. It requires 6 images, four divs and two spans! It's the only one that I know that's totally cross-browser compatible, which is why I use it.

    What method do you use for fluid rounded boxes? And is it cross-browser compatible?
     
    Masterful, Oct 21, 2009 IP
  2. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #2
    To make fluid rounded corners, you need an image for each corner, so they drag along when it gets wider. So that means you need 4 seperate images, although you could possibly combine these into one image and use the background-position property.

    It depends on the page, if you've got any spare elemnts hanging around without a background image set to them, e.g a container you could set one of the corners as the background image for the container etc..

    Otherwise you need a minimum of 4 SPANS and 1 image. Then throw the 4 SPANs into the 4 corners of the box.
     
    wd_2k6, Oct 22, 2009 IP