Friday, September 26, 2008

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
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
Sweet Rounded Corners 1 Liquid 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 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
Anti-aliased Nifty Corners 0 Liquid Steven Wittens
Rounded Corners without Images 0 Liquid Seky

via :smileycat

Labels: ,


Post a Comment

Subscribe to Post Comments [Atom]

<< Home