rounded divs

Discussion in 'HTML & Website Design' started by saturn100, Mar 25, 2009.

0
  1. #1
    Does anyone have any recommend on how to make rounded divs without using images
    Be it with CSS Java or AJax or anything

    I have tried the sites Nifty Corners and curvyCorners and others but cant get any to work

    Thanks
     
    saturn100, Mar 25, 2009 IP
  2. designz

    designz Peon

    Messages:
    301
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #2
    The trouble is if you dont use images for rounded corners Internet Explorer wont render the corners at all as rounded.

    There is a solution with css which was introduced in the css3 specification. Youcan give rounded corners to any div element which will render in firefox , safari i believe .

    #example{
    -moz-border-radius: 5px; /* Firefox border radius */
    -webkit-border-radius: 5px; /* Safari border radius */
    border: 1px solid #000; /* Border radius , border type , border color */
    }

    If you want to style induvidual corners you can by the following

    /* code for firefox */
    -moz-border-radius-topleft
    -moz-border-radius-topright
    -moz-border-radius-bottomleft
    -moz-border-radius-bottomright

    /* code for safari */
    -webkit-border-top-left-radius
    -webkit-border-top-right-radius
    -webkit-border-bottom-left-radius
    -webkit-border-bottom-right-radius
     
    designz, Mar 25, 2009 IP