Rounded Corners Without Images

[flesso]

Here is a nice little 'Nifty' tool that I would like to share with you. It's called Nifty and using only CSS and Javascript it can create you rounded corner boxes without the use of images. For more have a look here: http://webdesign.html.it/articoli/le...fty-corners/1/

[DPS Computing]

Thanks for that link flesso - its really helpful .

[paul]

Seems very easy to use for absolute positioning, I guess the effect should be very interesting, I would like to see few examples. Thanks flesso for the link.

[KellyJ]

Following appears to be an update to Nifty Corners:
http://www.html.it/articoli/niftycube/index.html

James

[flesso]

Following appears to be an update to Nifty Corners:
http://www.html.it/articoli/niftycube/index.html

James

I like that one. Seems to make the boxes for you.

[daledavies]

But why? That seems more complicated to me than just using css!

[KellyJ]

daledavies , I presume you mean using CSS + JavaScript is more more complicated than just using css, and that seems reasonable. I believe however, what Nifty Corners Cube is offering is a standard piece of JS, so that the customised CSS is then simplified.

Others use CSS with GIFs, even some have CSS only solutions. Following is a good summary list of many or most of the current alternative techniques:

http://www.smileycat.com/miaow/archives/000044.php

I have to admit, I haven't used any round corner technique yet, though hopefully in my next web design.

James

[WelshTom]

Yuck, javascript.

[developmentxl]

To elaborate on what Thomas just said; I would hope no one would ever use these sorts of JavaScript/CSS experiments on a live site.

While these things are great fun and can often lead to excellent new techniques this is not such a case.

Forcing the client to process a script to create a corner that could really quite simply be served from the server in the form of an image is crazy, not to mention the fact that these scripts produce rather horrendous and wholly inaccessible HTML.

As Kelly pointed out there are many other techniques out there that don't force you to sacrifice your semantic HTML or put extra load on your client, none of them are perfect but I'm afraid until we see the dawn of CSS3 (and multiple backgrounds on single elements) we're stuck with 'em.

[Smartdomainers]

I must say that it is great!!! I like it. I will try to apply to my website hosting. Only one question. Is it friendly with search engines?
Thanks

[Ben Stones]

Yuck, javascript.

Lol... although I may agree to an extent with you and developmentxl I seriously do not find the problem with JavaScript, most people don't really block JS via their browsers but really, there are a few disadvantages of using JavaScript.

I like to use JS on my pages to automate a few things so it's alright to me, don't see much wrong with it but I would understand where others are coming from about JS...

[Mr. Xav]

I have used the CurvyCorners library in the past. It seems to work pretty well, although you may need to adjust the sizes because of padding.

I would post the URL but I don't have enough posts.

www[dot]curvycorners.net

[Noel]

Personally I have no problem with javascript on live web pages - as long as the site renders OK and functions properly with java script turned off. i.e get your site looking great using just CSS and the occasional table and then add java script where it can make for a better user experience.

But I don't really understand the obsession with rounded corners. Square corners look just fine to me and rounded corders represent just too much effort for too little reward. Unlesss of course you have a paying client who just *has* to have rounded corners.

[Mr. Xav]

Rounded corners were part of the Web 2.0 revolution, which seems to have died down somewhat lately.

[rahul.ivote]

Thanks for that link flesso - its really helpful

[abstract]

Oh thanks alot...It is really interesting. I am going to try this too...
I have been working on some other similar stuff too, I will post it soon too.

[Vish]

Oh thanks alot...It is really interesting. I am going to try this too...
I have been working on some other similar stuff too, I will post it soon too.

Try this

Put this css parameter in any class and you will get round corner

-moz-border-radius: 8px;

here is example of Round corner Text Input box

.input{
font-family:Tahoma;
font-size:13px;
background-color:#FFFFFF;
color: #000000;
width:200px;
border:1px solid #E3EEF7;
-moz-border-radius: 8px;
height:20px;
}

[abstract]

This will only work in Firefox not in IE n others

Try this

Put this css parameter in any class and you will get round corner

-moz-border-radius: 8px;

here is example of Round corner Text Input box

.input{
font-family:Tahoma;
font-size:13px;
background-color:#FFFFFF;
color: #000000;
width:200px;
border:1px solid #E3EEF7;
-moz-border-radius: 8px;
height:20px;
}

[digi1001]

@abstract - is there an alternative that can be used in IE & others?

[abstract]

Well for IE you will have to use the strategy described above in start of this thread. By default mozilla supports this rounded corner CSS property. But I think they have introduced a border-radius property for rounded corners, but this will work only in CSS3 compatible browsers which may work for IE (if they start following standards).

So, for IE I will personally prefer images method to avoid any issues. Also when coming to JS IE always works differently so I think its better to avoid JS version and use images for corners.

Though there are some really good ways to use images too (using in nested div structures and using class to set background of each div.