SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Thread: Rounded corners

  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2000
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay - one of those things I should know by now, but since I usually use graphics rather than visible table borders to "frame" content, I haven't tried this before. And of course, now I can't seem to find one to look at as an example. So, how DO you round the corners on a table with a visible border?

  2. #2
    Kat's Meow Senior ******* WebKat's Avatar
    Join Date
    Jul 1999
    Location
    California USA
    Posts
    1,071
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ~Sahar~ Moved your post from Web Page Design - Thought you would find more response to your question from the Graphic Design Forum...


    [Edited by WebKat on 10-22-2000 at 06:41 PM]
    Dlynn :: SitePoint Senior Advisor ::
    PawPrint Designs by WebKat
    "Dogs come when they're called; Cats take a message and get back to you later." ~ Mary Bly

  3. #3
    Don't get too close, I bite! Nicky's Avatar
    Join Date
    Jul 1999
    Location
    Lancashire, UK
    Posts
    8,277
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure what you mean by visible! Why would you want to have visible table borders? Are you after something similar to this?
    http://www.f1community.com

  4. #4
    SitePoint Enthusiast
    Join Date
    Mar 2000
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks WebKat.

    Nicky - Thanks for the reply, but I am looking to use the actual table border attribute as a framing device for content areas. But if you just say "border='1'", then it comes out rectangular, with 90 degree angles for corners. I've heard people mention rounded corners and actually have seen a few examples (can't remember where, of course!), but can't find the "how to" anywhere.

  5. #5
    SitePoint Wizard westmich's Avatar
    Join Date
    Mar 2000
    Location
    Muskegon, MI
    Posts
    2,328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I found an excellant tutorial for creating rounded corners with PhotoShop. It even has an action file download. This is a nice feature; just select what you want rounded and click run on your action pallette.

    http://www.webreference.com/graphics/column25/2.html
    Westmich
    Smart Web Solutions for Smart Clients
    http://www.mindscapecreative.com

  6. #6
    Kat's Meow Senior ******* WebKat's Avatar
    Join Date
    Jul 1999
    Location
    California USA
    Posts
    1,071
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sahar I can picture exactly what you are talking about. . .a 1- inch border frame around your entire site.

    Through trial I error, here is how I would do it and it uses the same process as if you wanted traditional rounded corners on your website. I would create a graphic such as done here, say blue, the color that you want your border to be - "GifArt" - and then I would create another similar graphic, but smaller by 1-inch, the color the same as your background. Then layer this over the first. You should then have a blue 1-inch border graphic that you can then cut to put in the appropriate table cell to create the look that you want.

    Just a thought...
    Dlynn :: SitePoint Senior Advisor ::
    PawPrint Designs by WebKat
    "Dogs come when they're called; Cats take a message and get back to you later." ~ Mary Bly

  7. #7
    Don't get too close, I bite! Nicky's Avatar
    Join Date
    Jul 1999
    Location
    Lancashire, UK
    Posts
    8,277
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Dlynn - from your explanation I think I know what Sahar wants. But it would only work if the browser supports colored table borders right?

  8. #8
    Kat's Meow Senior ******* WebKat's Avatar
    Join Date
    Jul 1999
    Location
    California USA
    Posts
    1,071
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Nicky
    Dlynn - from your explanation I think I know what Sahar wants. But it would only work if the browser supports colored table borders right?
    Nicky, it really is only uploading sections of the 'frame' graphic that you make...only importing images to the table cells - upper left, upper right and so on. Just the same as adding a traditional rounded corner graphic but this time it looks like a colored 'frame' corner. Should work no different than importing any other image to a website.

    It is not 'colored' borders per se, but 'colored' graphics that are added...so there shouldn't be any browser problem at all.
    Dlynn :: SitePoint Senior Advisor ::
    PawPrint Designs by WebKat
    "Dogs come when they're called; Cats take a message and get back to you later." ~ Mary Bly

  9. #9
    Don't get too close, I bite! Nicky's Avatar
    Join Date
    Jul 1999
    Location
    Lancashire, UK
    Posts
    8,277
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Ahhhh, I totally see it now.

  10. #10
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    if you want to see table borders without using stylesheets or "bordercolorlight" (which is only supported by IE) then go to http://www.oursmallgroup.com, look on the right hand side. The two tables are done using nested tables and a 1x1 pixel clear GIF.

    As for the rounded corners, do't use the tutorial that was posted earlier. It does not give you very much control over the size of your corners and it sometimes leaves them jaggy.

    Real quick lesson: This will create "capsule" effect

    Open a document.

    1) Switch to the circular marquee tool

    2) Holding down the shift button, draw a circle approx the size that you want your corners.

    3) Without deselecting, drag guides to the top and bottom and vertical center of your selection

    4) Fill with any color you want, do not deselect

    5) Holding down the SHIFT+CTRL+ALT buttons, click in the center of the circle and drag the copy to the desired width of the "button"

    6) Deselect

    7) Switch to the rectangular marquee tool, simply create a selection that fills in the middle between the two circles and voila.

    If you want a square with less rounded corners, then, using the same method, create 4 circles. One for each corner and fill again.

    Hope that helped. That is the way that I always create rounded corners.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes


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
  •