Results 1 to 8 of 8

Thread: Curved corners!

  1. #1
    Join Date
    Feb 2004
    Posts
    305

    Curved corners!

    Hi,

    I wanted to know how these tables with curves on corners are made?

    See the attached image please, I pointed to them with red lines

    It is easy to make tables with sharp corners, but with curved corners, I don't know how!


    Thanks

  2. #2
    Join Date
    Feb 2004
    Posts
    305
    Sorry, here are the images
    Attached Thumbnails Attached Thumbnails curves1.gif   curves2.gif  

  3. #3
    Hope this helps

    http://www.sitepoint.com/article/css...s-boxes-curves
    | 2xhtmlCSS.com - PSD to XHTML/CSS to Wordpress
    | Web Hosting and Domain Blog

  4. #4
    Join Date
    May 2004
    Location
    Pflugerville, TX
    Posts
    11,222
    Here are a couple methods for creating rounded corners: http://www.iwdn.net/showthread.php?t=2874 - it's quite easy to do, and you certainly do not need a table to do it!
    Studio1337___̴ı̴̴̡̡̡ ̡͌l̡̡̡ ̡͌l̡*̡̡ ̴̡ı̴̴̡ ̡̡͡|̲̲̲͡͡͡ ̲▫̲͡ ̲̲̲͡͡π̲̲͡͡ ̲̲͡▫̲̲͡͡ ̲|̡̡̡ ̡ ̴̡ı̴̡̡ ̡͌l̡̡̡̡.__Web Design

  5. #5
    Join Date
    Feb 2004
    Posts
    305
    Thanks a lot gentelmen, I could do it!

    One thing more: See the first attached image in my second reply in this thread, and notice how the border is different from the background. Now this, how can be done?

  6. #6
    Join Date
    Aug 2005
    Location
    EIB Network
    Posts
    474
    In your attached image with the Yahoo login, is the login table actually overlapping the red cell that is behind it?

  7. #7
    Join Date
    Feb 2004
    Posts
    305
    Yes it is seodevhead

  8. #8
    Join Date
    May 2004
    Location
    Pflugerville, TX
    Posts
    11,222
    Quote Originally Posted by moh2004
    Thanks a lot gentelmen, I could do it!

    One thing more: See the first attached image in my second reply in this thread, and notice how the border is different from the background. Now this, how can be done?
    Well, if the box will be a set width, you could create a one pixel tall by XX# pixels wide background image and repeat it down the y-axis behind the contents of the box. That would probably be the simplest way to do this.

    You could also experiment with left/right borders and the box's background color. Just make sure this is located in the most buried <div>, and you'll need -1ox margin on either side so the corners overlap the borders beneath.

    Either method will work well across browsers and will require no more code than what's been posted already. It'll simply take some experimentation to get it just right
    Studio1337___̴ı̴̴̡̡̡ ̡͌l̡̡̡ ̡͌l̡*̡̡ ̴̡ı̴̴̡ ̡̡͡|̲̲̲͡͡͡ ̲▫̲͡ ̲̲̲͡͡π̲̲͡͡ ̲̲͡▫̲̲͡͡ ̲|̡̡̡ ̡ ̴̡ı̴̡̡ ̡͌l̡̡̡̡.__Web Design

Posting Permissions

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