I know there are umpteen billion tutorials on rounded corners out there, but here’s an easy way that I like to do it. Requires only one image, and allows you to nudge your text as close to the corners are you like.
If you want a 3px radius corner, have a black background, and white foreground, you need to create a 6×6 (i.e. radius*2) image of a white circle on a black background. This method won’t support transparency unfortunately.
The HTML:
<div id="tl"></div><div id="tr"></div><div id="bl"></div><div id="br"></div>
Your content here.
</div>
The CSS:
position:relative;
background-color: #fff;
width:600px;
height:300px;
}
#tl,#tr,#bl,#br{
background: #000 url(images/circle.gif);
width:3px;
height:3px;
position:absolute;
}
#tl{top:0;left:0}
#tr{top:0;right:0;background-position:3px 0}
#bl{bottom:0;left:0;background-position:0 3px}
#br{bottom:0;right:0;background-position:3px 3px}
Adjust all the “3px”s to match your radius, and modify the background attribute to meet your needs, and style content however you want. You probably want to put some padding on there. The important thing is that #content has position:relative so that the corners are aligned to the content box rather than the page.
I used this technique on my personal site, mnbayazit.com.
Leave a comment