Css Rounded Corners

[iGuest 3]

Rounded corners are a pretty hot topic in web design. It seems that almost every page has them. I guess people are trying to go with that "Web 2.0" look. But do you know how to make them?

I thought I'd share this site I found recently: given the color of the box you want, and the background of your site, it automatically generates the corner images, CSS and HTML code you need to get those cool rounded corners into your site.

From the site:

This page is for creating rounded corner graphics to use in your website design.
When you click Create Graphics, you will get four images, CSS code, and HTML code that you can use to make your own rounded-corner boxes.

Just put the graphics on your website, put the CSS into your stylesheets, and put the HTML into your web page and you'll be good to go!

http://wigflip.com/cornershop/.

It works very well, check it out.

[Mordent 0]

While I'll give you that that's certainly one way of doing it, it doesn't strike me as the most graceful. The corners themselves would be practically hard-coded in to your site, meaning if you wanted to change their radius, background colour etc. you'd have to go generate a whole load more images. I'm almost certain that there's a way of rounding corners in the proverbial works for CSS (and us fortunate Firefox users can round the corners already, I believe), and once I find the link I'll stick it here.

 

In short, I don't think using images really is the way we should be doing things, even if it is one of the easiest at the current time.

[iGuest 3]

Yes, you are absolutely right. There are more graceful ways of doing this, but, as I mentioned, this was intended for people who are relatively new to CSS. I've used this technique a few times, but, for the reasons you mentioned, I've gotten away from it recently. For people who are simply looking for easy things to plug into their website (and I've noticed a few around here), its not a bad way to start using rounded corners, since it takes only a few lines of CSS and HTML. Most non-image based rounded corner techniques are more in-depth, and maybe a little intimidating to a beginner. Unless there is a very simple way that I don't know about (probably...)?

[TavoxPeru 0]

I agree with both of you, they are a lot of ways to achieve this and all are valid, you can use CSS with images, you can use only images without CSS, and also you can use CSS with Javascript.

But one that i use to get the rounded corners effect is the one offered by the curvyCorners website, it only uses Javascript to get this effect and it is very easy to install, configure and use.

BTW, you can view it in action at Te Recuerdo Peru Peruvian Wall Appointment Calendar.

Best regards,

[iGuest 3]

Hey, thanks for the link.I like this much better than the one I linked to.I'll definitely be using this soon.

[TavoxPeru 0]

Hey, thanks for the link.
I like this much better than the one I linked to.

I'll definitely be using this soon.

You are welcome, i'm glad that it will help you soon, and as you, the first time i test it i get impressed with the results. This is not necesary but i suggest you to also download the weirdCorners located at the downloads page.

Best regards,