Best way to achieve rounded rectangles on an html site

Discussion in 'Web Design and Development' started by Fromethius, Aug 1, 2008.

  1. Fromethius macrumors member

    Joined:
    Jun 26, 2008
    Location:
    Pennsylvania
    #1
    Hello,

    For the site I am working on I am currently using tables to display everything. Although it looks nice, I think it would look better with rounded rectangles (what doesn't?). All the methods I have found so far requiring using photoshop and generating around 9 images (the four corners, the 4 sides, and a dot) and then positioning them using fine css (which isn't necessarily a problem) and html divs and so far I have not gotten any to work properly.

    I'm not looking for a fancy orange and pink striped rounded rectangle with shadows, but rather, a simple black or maybe light or dark grey normal table, except with curved edges.

    Hopefully this isn't too difficult?
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #3
    Too bad for the lack of support on it for now. Images seem to only decent way of doing this unfortunately. I've seen some wild CSS for creating interesting shapes, but usually not worth it.
    http://www.howtocreate.co.uk/tutorials/css/slopes
    http://www.csstextwrap.com/
    http://infimum.dk/HTML/slantinfo.html
    http://tantek.com/CSS/Examples/polygons.html (shapes done with CSS)

    I'm personally hoping SVG will catch on more. It's a great way to have graphics and they're scalable.
     
  3. ChicoWeb macrumors 65816

    ChicoWeb

    Joined:
    Aug 16, 2004
    Location:
    California
    #5
  4. pinktank macrumors 6502

    Joined:
    Apr 5, 2005
    #6
    there are also css generators that make you coded boxes
     
  5. Fromethius thread starter macrumors member

    Joined:
    Jun 26, 2008
    Location:
    Pennsylvania
  6. design-is macrumors 65816

    design-is

    Joined:
    Oct 17, 2007
    Location:
    London / U.K.
    #9

Share This Page