Jump to content
xisto Community
iGuest

Css Rounded Corners

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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...)?

Share this post


Link to post
Share on other sites

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,

Share this post


Link to post
Share on other sites

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,

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.