If you browse around, you are most likely to see rounded borders on newly redesign sites. Before CSS, the only border known to man was just square border, and even that was a pain in the ass because you had to have a table inside another table and mess with cellpadding and cellspacing of two tables to get 1 pixel border.
Now with CSS, and almost every browser being CSS ready, there are few less painful ways of getting rounded borders. One of the most famous ways of rounding borders is to have four images, each image representing each corner and then have four span tag around your content. Then each span tag references its corresponding image with specific relative alignment. If you get into shadows + rounded borders then you probably need six or eight images for filling space between each corner from one to another. For example read -> http://kalsey.com/2003/07/rounded_corners_in_css/ or http://www.sovavsiti.cz/css/corners.html.
If you don’t fancy images and just in the need for simple couple of pixels rounded border with out images. Then you can have four styles, each style representing each corner, with margin taking away some space gradually to make the roundness of the back ground. This only works with just rounded background not border to be specific. For example view -> http://www.html.it/articoli/nifty/nifty1.html
If you have an audience which is fire fox based only then you can use CSS 3 and specify “-moz-border-radius” and “-webkit-border-radius:” in your style attribute. Voila rounded borders and no messy code. For example read -> http://www.css3.info/preview/rounded-border.html.
In conclusion there are thee flavor of solutions. First one with images, Second two with only CSS and third with only CSS 3. Second solution is only useful for border-less rounded background.
Add A Comment