SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2002
    Location
    India
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to make round corner in same backgorund

    Hi,

    I would like to know how we make round corners in a table when the web page color and table background color are same and we want a different color for the border.

    I hope I am able to make things clear for you.

    Regards
    Web Solutions :: http://www.cyberparkonline.com
    Indian Yellow Pages :: Rajasthan Business Directory
    Travelogue and Destination Guide :: India Travel Information Forum
    Hotel Directory of Rajasthan, India:: http://www.hotelsinrajasthan.com

  2. #2
    Xbox why have you forsaken me? moospot's Avatar
    Join Date
    Feb 2001
    Location
    Clearwater, FL
    Posts
    3,615
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First, you will need a graphics program, such as Photoshop or Fireworks. Then it all depends on that program.

    You will basically need to create the rounded corner images in your graphics program and put them into an HTML table like so:

    Code:
    <table>
      <tr>
         <td><img src="corner1.gif"></td>
         <td bgcolor="#ffffcc">&nbsp;</td>
         <td><img src="corner2.gif"></td>
      </tr>
      <tr>
         <td bgcolor="#ffffcc" colspan="3">Content Goes Here</td>
      </tr>
      <tr>
         <td><img src="corner3.gif"></td>
         <td bgcolor="#ffffcc">&nbsp;</td>
         <td><img src="corner4.gif"></td>
      </tr>
    </table>
    If you want a border then you will have to create the bordered image in your program and slice it up into an HTML table. You can refer to your HELP file for full details on Slicing.

    But the output should be similar to this:

    Code:
    <table>
      <tr>
         <td><img src="corner1.gif"></td>
         <td><img src="topborder.gif"></td>
         <td><img src="corner2.gif"></td>
      </tr>
      <tr>
         <td><img src="leftbroder.gif"></td>
         <td bgcolor="#ffffcc">Content Goes Here</td>
         <td><img src="rightborder.gif"></td>
      </tr>
      <tr>
         <td><img src="corner3.gif"></td>
         <td><img src="bottomborder.gif"></td>
         <td><img src="corner4.gif"></td>
      </tr>
    </table>

  3. #3
    HI silver trophy Silverado4x4's Avatar
    Join Date
    Jan 2001
    Location
    USA
    Posts
    953
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If that doesn't help, there's a nice article floating somewhere at SitePoint.

  4. #4
    SitePoint Enthusiast
    Join Date
    Feb 2002
    Location
    India
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Thanks for the reply.

    What I am looking for is, suppose the color of the of the page is white and table background is also white and i want a round border corner (of say 1 pixel) in say color #bocodo, so how to do that in photoshop??
    Web Solutions :: http://www.cyberparkonline.com
    Indian Yellow Pages :: Rajasthan Business Directory
    Travelogue and Destination Guide :: India Travel Information Forum
    Hotel Directory of Rajasthan, India:: http://www.hotelsinrajasthan.com

  5. #5
    Xbox why have you forsaken me? moospot's Avatar
    Join Date
    Feb 2001
    Location
    Clearwater, FL
    Posts
    3,615
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would suggest starting a new thread in the multimedia/graphic design forum. I'm not sure how to do that in Photoshop. I know its a detailed process to get rounded corners.

  6. #6
    + platinum's Avatar
    Join Date
    Jun 2001
    Location
    Adelaide, Australia
    Posts
    6,441
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    'tis very easy

    The simplest way to do it, get a new document up in photoshop (fill the background with the background color you're using on your website), create a new layer draw a circle on it; make sure the circle is the same colour as the background (you wont be able to see it). Then click the little layers pallette layers effect and apply a 1px stroke in whatever border colour you want.

    Then using one quater of the circle cut it out (use ctrl-shift-c to copy) and save that corner 4 times at 4 rotations!

  7. #7
    Xbox why have you forsaken me? moospot's Avatar
    Join Date
    Feb 2001
    Location
    Clearwater, FL
    Posts
    3,615
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What about the 1px border on the top, bottom and sides?

  8. #8
    + platinum's Avatar
    Join Date
    Jun 2001
    Location
    Adelaide, Australia
    Posts
    6,441
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ohh, in *THAT* case.. make a use the rounded rectangle tool instead of the circle, and cut a little of the side/top/bottom off and them put them in a table which is 9x9 cells wide I'll try find an example..

  9. #9
    SitePoint Enthusiast
    Join Date
    Feb 2002
    Location
    India
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi,

    Sorry for reply late, i was out of station.

    Thanks, for all the suggestions, it works now.

    I was also windering what is the best way to cut images in photoshop??

    Regards and Thanks

    Manuj
    Web Solutions :: http://www.cyberparkonline.com
    Indian Yellow Pages :: Rajasthan Business Directory
    Travelogue and Destination Guide :: India Travel Information Forum
    Hotel Directory of Rajasthan, India:: http://www.hotelsinrajasthan.com

  10. #10
    Follow Me On Twitter: @djg gold trophysilver trophybronze trophy Dan Grossman's Avatar
    Join Date
    Aug 2000
    Location
    Philadephia, PA
    Posts
    20,580
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Print screen. Paste into an old copy of JASC Paint Shop Pro 5 (before it started acting too much like Photoshop). Split and save as GIF. So much faster than merging layers, splitting, and save for web.


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
  •