Making Rounded Corners for a Website

[MrCodeDude]

If I'm making a width of a website a set 744 pixels, height is based on the amount of content.

So, if I have the setup like this:

<table>
<tr>
<td width="10" height="10" background="topleft corner.png"></td>
<td width="724" height="10" style="border-top-color: #000000; border-top-style: solid; border-top-width: 1>blank shit</td>
<td width="10" height="10" background="topright corner.png"></td>
</tr>
</table>

In a 10x10px graphic, how do I make a 1 px corner so that it is almost perfectly round? Please note that it has to align with the other borders that I can use HTML to make.

I hope this makes sense. Any help is appreciated.

 

[FleshLight]

A 1 px corner?

 

[AFB]

You make a table with three rows and three columns.

 

[MrCodeDude]

Yeah, so the corner itself is only 1px. Outside of the corner will be the page's background color, the inside will be the table's background color.

 

[FleshLight]

Originally posted by: MrCodeDude
Yeah, so the corner itself is only 1px. Outside of the corner will be the page's background color, the inside will be the table's background color.

I'm not quite getting it. You want to make a single pixel shaped like 1/4 of a circle?

 

[mugs]

I think I understand what you want.... the border is a different color than the background of the table? So what you want is a 1/4 circle with a radius of 10 px, and the outermost pixels are a different color from the inner pixels?

I can't help you with that.

Text
Is that what you're looking for, basically? I made that in paint real quick, Photoshop would probably give you a nicer edge.

 

[MrCodeDude]

Originally posted by: mugs
I think I understand what you want.... the border is a different color than the background of the table? So what you want is a 1/4 circle with a radius of 10 px, and the outermost pixels are a different color from the inner pixels?

I can't help you with that.

Yes. Exactly.

 

[mugs]

See my edit. And as AFB pointed out, you will need a 3x3 table.

Edit, actually, I'd make the table a bit more complex than that... 5x5, with the corners having a colspan and rowspan of 2. Then between the corners you'll have two cells, one is 1 pixel thick and one is 9 pixels thick, with the appropriate colors.

Edit: My bad, that won't work. You'll need to use nested tables.

 

[JustAnAverageGuy]

*edit*

N\m, misunderstood the question

 

[FleshLight]

<table border="1" cellpadding="0" cellspacing="0" width="800">
<tr>
<td>TLEFT</td>
<td>MLEFT</td>
<td>RLEFT</td>
</tr>
<tr>
<td>TMID</td>
<td>&amp;nbsp;</td>
<td>RMID</td>
</tr>
<tr>
<td>TBOT</td>
<td>MBOT</td>
<td>RBOT</td>
</tr>
</table>

1. Photoshop
2. Make 20x20 PNG
3. Crop
4. ...
5. Profit!

 

[MrCodeDude]

How do I make a perfect 20x20 circle in Photoshop? And then how do I perfectly crop each 10x10 square?

 

[ActuaryTm]

Originally posted by: MrCodeDude
How do I make a perfect 20x20 circle in Photoshop?

The "Shift" key, whilst dragging.

 

[MrCodeDude]

Originally posted by: ActuaryTm

Originally posted by: MrCodeDude
How do I make a perfect 20x20 circle in Photoshop?

The "Shift" key, whilst dragging.

Yeah, but the sides never seem to be perfectly equal.

 

[George P Burdell]

look and learn from the masters

 

[screw3d]

If you can post an image of what you want, I should be able to whip up a CSS solution for you!

 

[MrCodeDude]

Screw3d - Pretty much like this: http://mrcodedude.com/

Except, I want the border to be #000000 (black) and the inside to be #EEEEEE (light grey).

 

[screw3d]

Ok I'm too lazy to code it myself but here is where I would refer to.

Since you are doing a fixed-width page, can't you just make long horizonal images for both top and bottom?

 

[screw3d]

It's proving to be a lot more difficult than I thought.. sorry dude but not tonight

 

[MrCodeDude]

It's okay. Thanks for trying