Rounded Corners Without Images

[Josh]

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/

CSS 3 rounded corners:

I'd just like to add that considering more of the modern browsers are supporting CSS 3 rounded corners, you may want to elect to use CSS 3 rounded corners. The border-radius CSS property is supported in al the major web browsers: Internet Explorer 9 and above, Firefox 3 and above, Chrome 4 and above, Safari 3.1 and above (and iOS Safari 3.2 and above), Opera 10.5 and above, Opera mobile 11.0 and above, Android browser 2.1 and above, BlackBerry browser 7.0 and above, Chrome for Android 18 and above and Firefox for Android 15 and above.

Some of the older versions of Firefox, Safari and iOS Safari required the use of proprietary CSS properties such as -webkit-border-radius. As well as using the as-yet draft border-radius property, also make use of the proprietary rounded corner properties for older versions of Firefox, Chrome, Safari, iOS Safari and Android browser. This includes -moz-border-radius and -webkit-border-radius.

/* A few examples */

border-radius: 10px; /* All sides */
border-top-left-radius: 10px; /* One side */
-moz-border-radius: 10px; /* All sides */
-webkit-border-radius: 10px; /* All sides */

Hope this helps.

(Info about CSS 3 corners relayed on page 3 of this thread).

[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

[Josh]

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