Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Aug 2005
    Posts
    365
    Thanks
    7
    Thanked 1 Time in 1 Post

    Question CSS Round corner border without images

    is it possible to make a rounded corner border in CSS without using any images ??????

    I saw something like this on a site: moz-border-radius:4px;
    but this is not working in IE or FF.

    is there any way to ... ????

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    Flint, Michigan, USA
    Posts
    632
    Thanks
    1
    Thanked 21 Times in 21 Posts
    I've not seen it done using absolutely NO images. It can be done using a single, transparent image used multiple times with different stated widths to make the result appear rounded:
    Code:
        <style type="text/css">
          /*<![CDATA[*/
            .RC_color {
              background-color: #ffdd00;
            }
          /*]]>*/
        </style>
        
          <table border="0" cellspacing="0" cellpadding="0" style="margin-left:20px;">
            <tr>
              <td align="right" width="10">
                <table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="3" height="1" alt="" title="" /></td></tr></table>
                <table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="5" height="1" alt="" title="" /></td></tr></table>
                <table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="6" height="1" alt="" title="" /></td></tr></table>
                <table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="7" height="1" alt="" title="" /></td></tr></table>
                <table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="8" height="1" alt="" title="" /></td></tr></table>
                <table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="8" height="1" alt="" title="" /></td></tr></table>
                <table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="9" height="1" alt="" title="" /></td></tr></table>
                <table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="9" height="1" alt="" title="" /></td></tr></table>
                <table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="9" height="1" alt="" title="" /></td></tr></table>
                <table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="9" height="1" alt="" title="" /></td></tr></table>
              </td>
              <td class="RC_color"><img src="zd0_null.gif" width="1" height="1" alt="" title="" /></td>
              <td align="left" width="10">
                <table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="3" height="1" alt="" title="" /></td></tr></table>
                <table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="5" height="1" alt="" title="" /></td></tr></table>
                <table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="6" height="1" alt="" title="" /></td></tr></table>
                <table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="7" height="1" alt="" title="" /></td></tr></table>
                <table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="8" height="1" alt="" title="" /></td></tr></table>
                <table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="8" height="1" alt="" title="" /></td></tr></table>
                <table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="9" height="1" alt="" title="" /></td></tr></table>
                <table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="9" height="1" alt="" title="" /></td></tr></table>
                <table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="9" height="1" alt="" title="" /></td></tr></table>
                <table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="9" height="1" alt="" title="" /></td></tr></table>
              </td>
            </tr>
            <tr>
              <td class="RC_color"><img src="zd0_null.gif" width="1" height="1" alt="" title="" /></td>
              <td class="RC_color" align="left">
    =============================<br />
    Sample content; replace this.<br />
    =============================
              </td>
              <td class="RC_color"><img src="zd0_null.gif" width="1" height="1" alt="" title="" /></td>
            </tr>
            <tr>
              <td align="right" width="10">
                <table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="9" height="1" alt="" title="" /></td></tr></table>
                <table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="9" height="1" alt="" title="" /></td></tr></table>
                <table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="9" height="1" alt="" title="" /></td></tr></table>
                <table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="9" height="1" alt="" title="" /></td></tr></table>
                <table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="8" height="1" alt="" title="" /></td></tr></table>
                <table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="8" height="1" alt="" title="" /></td></tr></table>
                <table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="7" height="1" alt="" title="" /></td></tr></table>
                <table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="6" height="1" alt="" title="" /></td></tr></table>
                <table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="5" height="1" alt="" title="" /></td></tr></table>
                <table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="3" height="1" alt="" title="" /></td></tr></table>
              </td>
              <td class="RC_color"><img src="zd0_null.gif" width="1" height="1" alt="" title="" /></td>
              <td align="left" width="10">
                <table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="9" height="1" alt="" title="" /></td></tr></table>
                <table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="9" height="1" alt="" title="" /></td></tr></table>
                <table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="9" height="1" alt="" title="" /></td></tr></table>
                <table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="9" height="1" alt="" title="" /></td></tr></table>
                <table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="8" height="1" alt="" title="" /></td></tr></table>
                <table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="8" height="1" alt="" title="" /></td></tr></table>
                <table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="7" height="1" alt="" title="" /></td></tr></table>
                <table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="6" height="1" alt="" title="" /></td></tr></table>
                <table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="5" height="1" alt="" title="" /></td></tr></table>
                <table border="0" cellspacing="0" cellpadding="0"><tr><td class="RC_color"><img src="zd0_null.gif" width="3" height="1" alt="" title="" /></td></tr></table>
              </td>
            </tr>
          </table>

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Superfluous elements

    The above, and something similar using a whole bunch of empty elements with various widths, should be regarded as very bad approaches because of the introduction of a great number of meaningless, superfluous elements; both methods are vastly inferior to the simple application of background images to creating the rounded corner effect.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Uzair what you have would work in firefox, you just need a hyphen in front of it however it won't work in IE. I like Stu Nicholl's example here: http://www.cssplay.co.uk/boxes/snazzy.html
    Its doesn't use that much superflous code. Maybe about 10 extra bold tags and thats about it.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Extra

    Uck. Still 10 too many.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    I agree but it might be better than the table solution previously posted. Usually I just make the curves. It takes a few minutes to make rounded corners.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •