CSS Rounded Corners 'Roundup'
This collection of techniques to create boxes with rounded corners using CSS has become quite popular. The problem now is there are so many choices it's hard to know which one to choose.
To that end I've provided some more information about each method in order to help people choose which best fits their needs.
Some of these techniques use CSS and one or more background images, some use CSS, JavaScript and no images, and a couple use only CSS — no images or JavaScript required (more markup is needed though).
Not Sure Which One to Use?
There are so many different techniques now, it really depends on your individual requirements and preferences; particularly whether you want to use a JavaScript-based technique or not.
Try out a few methods and see if there's one that fits. For convenience I've split the methods into two tables:
Click on a column heading to sort the table by that column.
CSS Only Methods
| Name | # of Images | Fixed / Liquid | Site / Comments |
|---|---|---|---|
| Even More Rounded Corners With CSS | 1 | Liquid | HedgerWow |
| Even More Rounded Corners With CSS | 1 | Liquid | Schillmania.com |
| CSS Mojo: Adding Visual Polish To Your Pages | 1 | Liquid | Leslie Sommer |
| CSS Round Corners | 0 | Fixed / Liquid | Gran Yosler. Limited flexibility. |
| Single Image Fluid/Fixed Rounded Bordered Corners walkthrough | 1 | Fixed / Liquid | CASS-Hacks |
| ORB | Fluid CSS One Image Round Borders | 1 | Liquid | Daniel Tillett |
| Rounded Corners for Fixed width | 2 | Fixed | Daniel Bulli |
| Curved boxes in CSS | 2 | Fixed | Includes CSS3 example |
| Chunky Borders and corners with no images | 0 | Fixed / Liquid | Uses no images |
| Lean and Clean CSS boxes | 2 | Fixed | TJKDesign |
| PNG transparency rounded corners using images | 7 | Liquid | Uses PNG images |
| CSS Liquid Round Corners | 6 | Fixed / Liquid | Search-This |
| RoundedCornr | 4 | Fixed / Liquid | Online generator |
| More Rounded Corners with CSS | 6 | Liquid | Schillmania |
| Spanky Corners | 4 | Liquid | SitePoint. Online generator |
| Mountaintop Corners | 2 | Fixed | A List Apart. Uses definition list |
| Custom Corners & Borders: Part I | 5 | Liquid | A List Apart. For solid backgrounds |
| Custom Corners & Borders: Part II | 5 | Liquid | A List Apart. For gradient backgrounds |
| Simple Rounded Corner CSS Boxes | 1 | Fixed | Modx CMS. Replaces Thrash Box |
| Spiffy Box | 1 | Fixed | SpiffyBox. Online generator based on Thrash Box |
| Graphik Junkie | 3 | Fixed | Graphik Junkie |
| Single Image Rounded Corners | 1 | Fixed / Liquid | Phoenity |
| Custom Corners | 3 | Fixed | Interface-7 |
| Bullet Proof Rounded Corners | 4 | Liquid | Albin.Net. Images added via HTML not CSS |
| Rounded Corners in CSS | 4 | Fixed | Adam Kalsey |
| CSS teaser box | 1 | Fixed | 456 Berea Street |
| CSS teaser box revisited | 2 | Liquid | 456 Berea Street |
| News list | 1 or 2 | Fixed | 456 Berea Street |
| CSS Rounded Box Generator | 5 | Fixed | Neurotic Web. Online generator |
| Round Corners | 3 or 6 | Fixed or Liquid | Sova v siti. Liquid box uses 8 divs |
| Rounded corners using CSS | 4 | Liquid | Maurice Svay |
| Simple Box | 8 | Fixed / Liquid | Sperling Corporation |
| Custom Bordered Boxes | 1 or 2 | Fixed / Liquid | Steve Clay. Includes Fireworks source file |
| Liquid box with rounded corners | 4 | Liquid | Guy Fisher |
| Borders with curves | 5 | Fixed | Webcredible |
| Boxes with curves | 4 | Fixed | Webcredible |
| Rounded block or design with CSS & XHTML | 3 | Fixed | Alsacreations. Uses definition list for markup |
| Resizable box with freely stylable corners & surface | 4 | Liquid | Andreas Kalt |
| Rounded corners in CSS | 4 | Liquid | Arve Bersvendsen. Does not work in IE |
| Broader Border Corners | 4 | Liquid | 24 Ways |
| Liquid round corners | 4 | Liquid | Tiscali |
| CSS: Smart Corners | 4 | Liquid | Mike Cherim |
| Add Fluid Borders to Your Boxes with CSS | 0 | Fixed | WebReference |
| Snazzy Borders | 0 | Fixed / Liquid | CSS Play |
| Spiffy Corners | 0 | Fixed / Liquid | Spiffy Corners. Online generator |
Methods Requiring JavaScript
| Name | # of Images | Fixed / Liquid | Site / Comments |
|---|---|---|---|
| Corner.js | 0 | Fixed | Multiple effects including borders. |
| Anti-aliased Rounded corners with JQuery | 0 | Fixed / Liquid | Blue anvil.JQuery version of Curvy Corners. |
| ShadedBorder | 0 | Fixed / Liquid | Drop shadows & other effects. |
| Transcorners | 0 | Fixed | Inviz.ru |
| Sweet Rounded Corners | 1 | Liquid | Allcrunchy.com. Online generator |
| DomCorners | 1, 2, 5 | Liquid | Web Graphics. # of images based on layout |
| Transparent Custom Corners and Borders | 2 | Fixed | 456 Berea Street |
| Customising custom corners and borders | 2 | Liquid | 456 Berea Street |
| curvyCorners | 0 | Fixed / Liquid | Curvy Corners. Support forum; mailing list |
| Nifty Corners Cube | 0 | Fixed / Liquid | HTML.it. 13 examples |
| Rico – Javascript Rounded Corners | 0 | Fixed | Rico |
| Rounded Corners With CSS and JavaScript | 0 | Fixed | Dev Articles |
| Rounded Corners with CSS and JavaScript | 4 | Fixed | SitePoint |
| MochiKit Rounded Corners | 0 | Liquid | Mochikit |
| Octopus Engine | 8 | Liquid | Dragon Labs. Source package includes PSDs |
| Editsite Rounded Corners | 0 | Fixed | Editsite.net |
| Anti-aliased Nifty Corners | 0 | Liquid | Steven Wittens |
| Rounded Corners without Images | 0 | Liquid | Seky |
via :smileycat
Labels: CSS, Web Design
0 Comments:
Post a Comment
Subscribe to Post Comments [Atom]
<< Home