ok ok....you must be thinking that - "rounded corners without images" is something that has been already posted here. ya I know, but that one can be used only in Mozilla i think..... but definitely not in IE. Here I use a completely different method of getting a rounded corner by purely using basic CSS (which thus results in its compatibility with almost all the latest browsers) , and this code is not which I have written, but by a web designer named Alessandro Fulciniti and he has called this piece of code as Nifty Corners and if you want to get more info on this just go to HTML.it

The basic idea is to use a set of inline tags with appropriate margins and colour. The following will give you corners with quite a descent size of roundness.



The next piece of code is very similar but will give you smaller corners



The primary reason to use inline tags here was because inline tags can be used inside any other tag. I am using here a <b> tag but you can even use other inline tags like <span>

The basic CSS for the above code is something like this



the above CSS will make the corners rounded. The logic used here is the we use a series of <b> tags inside a mother <b> tag at the starting and at the end of our <div> tag. The no of <b> tags to be used is usually 4 for a descent size of roundness and 2 if you want a smaller rounded corner. But that completely depends on you. Then for each individual <b> tag inside it give decreasing values of left and right margin usually with a difference of 2px between 2 consecutive <b> tags to get a curve. (if you give only a difference of 1 px then you'll end up just getting a diagonal line instead of a curve).

The technique works even on floated, absolute positioned or percentage-width elements. It fails on element with fixed height, or with padding. Both of the problem could be easily solved with an extra wrapper around the content.

Known bugs are: text-indent won't work on the element that has been rounded in Opera, and IE (both Mac & version 6 PC) would mess up on floated elements without specific width.

The support should be extended to all modern browsers: the technique has been tested with success in Internet Explorer 6, Opera 7.6, Firefox 1.0, Safari 1.1 Mac IE. It fails on IE 5.x PC.

Following is an example implementing the above technique. Just copy the following code, make an .html file and view it in any browser.

very slick.
I don't know if bold tags are the best use, it could be div instead i think, but still the idea is good, and nice to see it working in IE too.

If you check out this article, they mention/explain why they used bold tags instead of div's - it's explained better in the article, but basically they wanted an in-line by default tag.

This post has been edited by girasquid: 14 Sep, 2007 - 08:29 PM

I can't seem to get this to work I'm pretty sure I am doing everything it says too. Oh the frustration.

can you post your code..... let me see if i can help....

I will in a little bit. My dad is doing stuff on the computer I use so I can't right now.

I will try to get as much help as I can with just this:

1. Does the CSS have to be embedded ( I think thats the right word) or can I put it on my linked CSS page.

2. Wouldn't the code be pretty much exactly the same as the one in the tutorial?





* I think he is getting off, I will go pull up my code and edit this in a minute.

do you mean link the css from a separate file? yes remove the style section and link it in instead.

the resulting page to the browser will be just as it is now.

Ok, I figured out how to get the tables to work on my own, but now I am having problems with changing the text inside them. If I try to make the text black, it changes the whole table. I am trying to make a table like the navigation on this site to the left. Maybe that is totally different. Here is some of the code.



and here is the code from my CSS:




Sorry for the annoyance

well if you ask me there is a much simpler way for doing this.....go visit the link i have added in the starting of my tutorial to html.it and then there the author has given a javascript file by which by just calling one function you can round any element in your page..... just download the file and paste it in your webpage folder.......I could explain how to do this in detail but it would be too long and i dont get too much internet time to explain you it detail.....maybe I could write another tutorial on it but I dont know if the moderators may count it same as this one.....so can I?? maybe william can ans to this one....

Hey thanks for your help man. I finally got it figured out . You helped a lot.

no probs dude.....

<b> == DEPRECATED