• We’re currently investigating an issue related to the forum theme and styling that is impacting page layout and visual formatting. The problem has been identified, and we are actively working on a resolution. There is no impact to user data or functionality, this is strictly a front-end display issue. We’ll post an update once the fix has been deployed. Thanks for your patience while we get this sorted.

Making Rounded Corners for a Website

M

MrCodeDude

Lifer
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>
Click to expand...

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.
 
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.
 
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.
Click to expand...

I'm not quite getting it. You want to make a single pixel shaped like 1/4 of a circle?
 
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.
 
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. 🙂
Click to expand...
Yes. Exactly.
 
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.
 
<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!
 
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?
 
You must log in or register to reply here.

TRENDING THREADS

Back
Top