Rounded Corners In CSS
Last year I came across a superb method of creating rounded corners that I want to share with you. I cannot take credit for it but you can thank Dave Woods for a well thought out approach.
The beauty behind Dave's solution is that it relies upon one circular image. This circle is used as the rounded edge and spliced via CSS positioning in four quadrants. The background of the image should be the same color as the background to bleed in with. The circle color should be the same color as the background of your blocks (usually white).
Each block that you want rounded corners with, gets two sets of span tags marking the tops and bottoms.
Now why is this a superior method? Imagine having template pages with each page using a different rounded corner color and/or radius. Instead of creating the images and hand slicing, you can just fire up your image editor and create a transparent gif with a circle in it.
Check out Dave's solution and I think you will agree that its a very flexible and easily maintainable approach.
Rounded Corners In CSS With Meyer Reset
The following is XHTML strict markup using Eric Meyer's global reset along with Dave Wood's CSS rounded corner code.
The image:
This is a rounded corner test
Vivamus elit. Mauris odio felis, bibendum eu, eleifend non, rutrum in, tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed malesuada sapien sit amet risus fringilla nonummy. Praesent laoreet tristique sem. Vestibulum venenatis congue lacus. Etiam volutpat, lacus sit amet eleifend posuere, purus leo bibendum nulla, sit
- kkobashi's blog
- Login to post comments