How to make rounded borders for html?

Discussion in 'HTML & Website Design' started by cloudiosify, Mar 9, 2011.

  1. #1
    Anone can share some cool loking rounded borders codes for html?
     
    cloudiosify, Mar 9, 2011 IP
  2. chunnumunnu

    chunnumunnu Active Member

    Messages:
    1,217
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    80
    #2
    search in google for it :) , its rounded border not working in IE8 , well rounded border nothing to do with html. Its all about CSS. You can get rounded borders by using images for all browsers ..
     
    chunnumunnu, Mar 10, 2011 IP
  3. J.Thomas

    J.Thomas Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    As has been said, you need to use the border-radius property in CSS3. Forget using images; you shouldn't be supporting old browsers.
     
    J.Thomas, Mar 10, 2011 IP
  4. vishal6565477

    vishal6565477 Peon

    Messages:
    18
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Put this code within you <style> section:

    .rounded-corners {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -khtml-border-radius: 4px;
    border-radius: 4px;
    behavior: url(/css/border-radius.htc);
    }

    Also, you need to download www.gingle.co.cc/css/border-radius.htc
    If the border-radius.htc file opens up in your browser, just view the source and copy it to make another file by the same name (that is, border-radius.htc)

    Now, put this file in a /css/ folder relative to everypage where you want rounded corners.

    Now, whichever table or textbox or anything that you want to have rounded corners, just use rounded-corners as a class.

    eg. <table class="rounded-corners" >


    This also works on IE8 or IE7. The border-radius.htc file makes it possible for IE too. If you dont include the border-radius.htc file, the rounded corners wont appear on IE.
     
    vishal6565477, Mar 11, 2011 IP
  5. cloudiosify

    cloudiosify Peon

    Messages:
    54
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Thanks guys, I will try it
     
    cloudiosify, Mar 11, 2011 IP