How To Get CSS/Javascript Rounded Corners (with NO Images)

I just did a landslide of research looking for curved corners for use in my css/html pages. My desires were:

  1. No images (pure CSS)
  2. Simple, easy to configure (limited code, mostly include files)
  3. Use of javascript: ok
  4. Able to show images in the background (area outside of corners should show background, if it’s a color or image)

What I found was that a lot of simple css rounded corner solutions did 1-3, but I hit a huge snag when I kept looking for a solution that considered item 4. When I put a div tag, or any other tag on the page, I want that tag to have rounded corners, and I want whatever is behind the tag to show, even in the rounded corner area. I found many solutions that worked, but only worked to have a static color in the rounded area, none would show an image as the background. Until I found www.curveycorners.net. This is a great tool, and the tool I used to get the effect I was looking for on this site. (keep in mind my theme may have changed since this post).

But the tool is great, it’s easy to configure, and covers the gamut of possibilities. Using a background color, or an image, and it even supports the rounded corner element to be an image.

Thanks to Cameron Cooke and Tim Hutchison, check out their great tool at: www.curveycorners.net

Rate This Article:
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

Leave a Comment

You must be logged in to post a comment.