Results 1 to 5 of 5

Thread: Rounded Corners

  1. #1
    Join Date
    Jul 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post Rounded Corners

    I heard somewhere that you can create round corners on tables and stuff using css. Is this really possible?if so how can you do it?

  2. #2
    Join Date
    Sep 2006
    Location
    St. George, UT
    Posts
    2,769
    Thanks
    3
    Thanked 157 Times in 155 Posts

    Default

    Google is your friend. Here are a few sites that talk about CSS Rounded Corners:

    http://www.google.com/search?q=CSS+R...ient=firefox-a

    and here is an online genorator:

    http://www.roundedcornr.com/

    Hope this helps.
    "Computer games don't affect kids; I mean if Pac-Man affected us as kids, we'd all be running around in darkened rooms, munching magic pills and listening to repetitive electronic music." - Kristian Wilson, Nintendo, Inc, 1989
    TheUnlimitedHost | The Testing Site | Southern Utah Web Hosting and Design

  3. #3
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Since this effect isn't vital, I'd suggest increasing readability by using a script like this one.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends français | entiendo español | tôi ít hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  4. #4
    Join Date
    Mar 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    First off, go to: http://wigflip.com/cornershop/


    Then, when you have your images, use:

    HTML:

    <div class="bl"><div class="br"><div class="tl"><div class="tr">
    Lorem ipsum dolor sit amet consectetur adipisicing elit
    </div></div></div></div>
    <div class="clear">&nbsp;</div>

    CSS:

    .bl {background: url(bl.gif) 0 100% no-repeat #e68200; width: 20em}
    .br {background: url(br.gif) 100% 100% no-repeat}
    .tl {background: url(tl.gif) 0 0 no-repeat}
    .tr {background: url(tr.gif) 100% 0 no-repeat; padding:10px; text-align: center}
    .clear {font-size: 1px; height: 1px}



    And that should do you nicely.

  5. #5
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    It would work, but is less than optimal, since it requires images (these will have to be transparent PNG images in some cases, which brings in the whole IE6 issue on top of the added bandwidth) and bulk markup that's essentially presentational.

    You probably mean line-height there rather than font-size, too.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends français | entiendo español | tôi ít hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

Bookmarks

Posting Permissions

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