Page 1 of 2 12 Last
  • Jump to page:
    #1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2003
    Posts
    15
    Rep Power
    0

    Question CSS style for rounded table borders?


    What is the CSS style for rounded table borders?

    Does it work across all the major browsers, any downsides?
  2. #2
  3. No Profile Picture
    CF sMod
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2000
    Location
    Maine, USA (a.k.a. Boonies)
    Posts
    242
    Rep Power
    15
    According to the CSS3 Borders module still in Working Draft:

    border-radius: 5px;

    Mozilla implements this as
    -moz-border-radius (because it hasn't been standardized yet), but no other browser provides such an implementation.
    Jason Contact Me
    Super moderator @ CodingForums
  4. #3
  5. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2003
    Posts
    15
    Rep Power
    0

    Not working


    I use frontpage, which may be why it's not working:

    table { border-radius: 5px; border-style: solid; border-color: #CC0000; padding:10; background-color: #FFFFFF; margin-left:auto; margin-right:auto }
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2002
    Location
    Inside the GNU/Hurd kernel
    Posts
    492
    Rep Power
    13
    You can also change individual border radius.For Mozilla that would be:
    -moz-border-radius-bottomleft
    -moz-border-radius-bottomright
    -moz-border-radius-topleft
    -moz-border-radius-topright
  8. #5
  9. Super Genius
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2002
    Location
    Orlando, Florida
    Posts
    314
    Rep Power
    13
    Why don't you just use an image?
    Sleep is highly overrated.
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Sep 2000
    Posts
    763
    Rep Power
    0
    Cause it is easier to use style sheets than it is to make an image.

    Eclipce
  12. #7
  13. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2003
    Location
    Just this side of hell, Tulsa, Oklahoma...
    Posts
    13
    Rep Power
    0

    Table Borders


    Ok...
    I agree that CSS is easier and usually nicer looking than clunky <td> placement to get the dang borders to look nice... Now, my question is...

    Can you use CSS to place image borders on a table?
    Couldn't you use position-absolute or some-such to place a border top... border top right... top left...???

    I would like to use images for my table borders... but I really don't wanna have to create freaking cell placements for everything...

    Help me Mr. Popeil...
  14. #8
  15. Wiser? Not exactly.
    Devshed God 1st Plane (5500 - 5999 posts)

    Join Date
    May 2001
    Location
    Bonita Springs, FL
    Posts
    5,959
    Rep Power
    4035
    You could w/ absolute positioning, but it wouldn't work so well probably. If anything comes out differently for some reason, everything will be messed up. The most universal way would be to just make the table cells for the images. Shouldn't be that hard, just make a 9x9 table and put the images in the outter cells, content in the middle cell.
  16. #9
  17. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2003
    Location
    Just this side of hell, Tulsa, Oklahoma...
    Posts
    13
    Rep Power
    0

    Angry Crap!


    I hate coding HTML for something that CSS should be able to do...
    It's a shame there isn't some kinda CSS code for something like:

    table
    {
    border-top-right:url(some link here);
    border-top-center:url(some link here);
    border-top-left:url(some link here);
    }

    etc...

    That would be so much easier... and cleaner too...

    Ah well...
    I guess until the internet restructures itself to fit my needs, I will make do with what I have...
  18. #10
  19. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Posts
    2
    Rep Power
    0
    I was trying to do the same thing and I found this thread doing a google search for "table css image borders," and also came across this page:
    http://threeplusone.com/code/shadow.html
    It has a solution to your problem.
  20. #11
  21. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    here is a better solution using purely css.

    http://www.virtuelvis.com/gallery/css/rounded/

    its should work in standard compatible browsers
  22. #12
  23. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Posts
    2
    Rep Power
    0
    thanks for the post but I can't see the effect from your link, and I'm using IE 6.0 on a PC! I'm trying for an effect that will work in most browsers.
  24. #13
  25. Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2003
    Posts
    804
    Rep Power
    101
    If you need the effect in multiple places, you could write a JS function to generate a table... pass it the inner HTML of the table as a string argument and make the function output the 9x9 table like kicken suggested... put the function in a .js file and include it in any pages that use it if you need it on more than one page.
  26. #14
  27. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2001
    Location
    Wilmslow, Cheshire
    Posts
    255
    Rep Power
    18
    There is another option for curved corners on tables - the Structured Graphic Control. There's an example here - though I've no idea what it looks like in non IE5+ browsers.

    That method does allow you to use a script to change the colours in all three different positions:

    i) inside the border (the table background);
    ii) the table border itself;
    iii) outside the border (the page background).

    That is not possible with a traditional image where you could only set one of the colours by using a transparent gif and then changing the cell background for whichever colour showed through the transparency.

    Although the Structured Graphic option is quite workable and simple, I've never actually used it on a site (apart from demos).
  28. #15
  29. ASP.Net MVP
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Aug 2003
    Location
    WI
    Posts
    4,378
    Rep Power
    1511
    My site does it. I modify the html, but I use styles to determine where the images are placed:
    http://www.elknet.net/elkjac
    It's not perfect, but I can change the color of the border by changing one number in the style sheet, and the border will automatically size itself lenghwise to accomadate whatever I put inside.
    Primary Forum: .Net Development
    Holy cow, I'm now an ASP.Net MVP!

    [Moving to ASP.Net] | [.Net Dos and Don't for VB6 Programmers]

    http://twitter.com/jcoehoorn
Page 1 of 2 12 Last
  • Jump to page:

IMN logo majestic logo threadwatch logo seochat tools logo