Rounded boarders using CSS

Discussion in 'HTML & Website Design' started by sinaitech, Feb 26, 2011.

0
  1. #1
    How to create rounded boarders using CSS.
     
    sinaitech, Feb 26, 2011 IP
  2. buzenko

    buzenko Peon

    Messages:
    93
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Last edited: Feb 26, 2011
    buzenko, Feb 26, 2011 IP
  3. radiant_luv

    radiant_luv Peon

    Messages:
    1,327
    Likes Received:
    34
    Best Answers:
    1
    Trophy Points:
    0
    #3
    radiant_luv, Feb 27, 2011 IP
  4. ashishy.freelancer

    ashishy.freelancer Peon

    Messages:
    50
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    use
    moz-border-radius but it doesnot reflect in all browsers for example it doesnt reflect in IE
     
    ashishy.freelancer, Mar 1, 2011 IP
  5. clickbump

    clickbump Greenhorn

    Messages:
    29
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    15
    #5
    I use this often in ClickBump Engine templates...

    .rounded {
border:1px solid #ccc;
border-radius:12px;
-moz-border-radius:12px;
-webkit-border-radius:12px;
padding:10px;
}
<div class="rounded">This element will have a 1 pixel gray border with 10 pixels of padding applied between the text and the inside border</div>
    HTML:
     
    clickbump, Mar 2, 2011 IP
  6. ACME Squares

    ACME Squares Peon

    Messages:
    98
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Latest webkit and ie9 support native border-radius, so there's no need for -webkit-border-radius anymore.

    Visitors will thank you for NOT putting kB of javascript hacks just to get rounded borders on ie6.
     
    ACME Squares, Mar 7, 2011 IP