Rounded corners

From WhyNotWiki

Jump to: navigation, search

There's an amazing variety of techniques out there for producing rounding corners! Some use images; others do it all with CSS. Some require JavaScript; others don't. Some require a hideously complex set of XHTML tags; others only require a couple divs. Some use 1 big image; others use 4 little ones. Here is a comparison of the ones I looked at...

For your convenience, I've taken most of their example pages, stripped off everything that is superfluous, and made a bare-minimum example page that you can examine or copy.

I was mean and changed the background color of the page so you can see whether they're using transparency or not—don't worry, it looks good if you change the background back to white!

I also boiled down the minimum XHTML that is required for technique even further, down to some weird-looking abstract representation, so you could see at a glance how horrendous it was (in case you're a markup minimalist like me):

Example:
  {div {div {*} {*} ...} {div {*}{*} } }    

Legend:
  {*} means img tag
  {div *} means a div tag with background images specified with CSS
  ... means "content goes here"

Contents

[edit] kalsey.com

http://kalsey.com/2003/07/rounded_corners_in_css/ (Rounded corners in CSS :: Adam Kalsey)

  • 4 images: left 2 in img tags and right 2 as background images
  • a div within a div at the top and bottom
  • Minimum XHTML required: {div {div {*} *} ... {div {*} *} — pretty clean
  • Demo

[edit] alistapart.com

http://alistapart.com/articles/mountaintop/ (A List Apart: Articles: Mountaintop Corners)

  • 2 images: 1 for top and 1 for bottom; fixed width
  • Images have no transparency, much be generated for each BG/FG combination
  • Minimum XHTML required: {dl {dt *} {dd} ... *}
  • Demo

[edit] ThrashBox / Haystack technique

http://www.modxcms.com/simple-rounded-corner-css-boxes.html (Simple Rounded Corner CSS Boxes (ThrashBox))

http://www.the-haystack.com/playground/rounded-corners/ (The Haystack: rounded corners example)

  • 1 huge image (2000px square) (bad), positioned in each corner so only 1 corner is showing (clever)
  • Minimal XHTML required: {div {div * {h2 *}} {div ... *} *} — pretty clean
  • Every time I load their example page, it seems like my browser slows way down... that could be a bad thing.
  • [Demo]

http://www.spiffybox.com/index.php?w=500&h=500&r=8&fg=FFFEC8&bd=024898&bg=045CC6 (Spiffy Box - Simple Rounded Corner CSS Boxes made easy.

  • It's basically an image generator for use with the ThrashBox technique.

[edit] Rico (JS library)

http://openrico.org/rico/demos.page?demo=rico_effect_round (Rico)

http://www.juixe.com/techknow/index.php/2006/08/10/rounded-corners-with-rico/ (TechKnow Zenze » Rounded Corners With Rico)

  • Really easy to add rounded corners. Just add a call like this: new Rico.Effect.Round( "div", "TopContentSection");
  • Unfortunately, I found it wasn't robust enough for use in all situations. I sometimes had to create a div inside it with fixed/100% height in order to "encourage" the corner images to actually go out all the way to the corners.
  • It seemed to work reasonably well when the height and width of the div was fixed, but when it could vary widely, I couldn't quite get it to work in both IE and Firefox... At least not in my particular situation. (I didn't turn it into a minimal test case.)
  • I had to remove padding and borders from the divs I was applying this to. Not sure if it was just me.

Here's a screenshot of the bug/incorrect behavior I often ran up against:

Image:RicoCornersBug-YellowOnBlue.png

[edit] neuroticweb.com / albin.net

http://www.neuroticweb.com/recursos/css-rounded-box/index.php?idioma=en (CSS Rounded Box Generator)

  • 4 images in img tags positioned with CSS float
  • Minimum XHTML required: {div {div * {div *}} ... {div * {div *}} }
  • Images have no transparency, much be generated for each BG/FG combination
  • Demo

http://www.albin.net/CSS/roundedCorners/examples.html (Albin.Net CSS: Bullet-Proof Rounded Corners: Examples)

  • Pretty much the same but with some more hacks for IE5/win
  • Minimum XHTML required: {div {div {*} {*} ...} {div {*}{*} } }
  • The examples demonstrate that it works correctly when positioned relative, fixed, floated, etc.

[edit] NiftyCorners (JS library)

http://www.html.it/articoli/niftycube/index.html (Nifty Corners Cube - freedom to round)

http://webdesign.html.it/articoli/leggi/528/more-nifty-corners/1/ (More Nifty Corners | Articoli Webdesign | Webdesign.HTML.it)

http://www.sproutit.com/articles/bigact/515 (5 Reasons Why NiftyCorners suck)

[edit] spiffycorners.com

http://www.spiffycorners.com/ (Spiffy Corners - Making anti-aliased rounded corners with CSS)

  • It looks surprisingly good, I admit, but I don't really like the technique...
  • It uses 5 b tags (arbitrary choice of tag: turned into block-level elements in the CSS) on the top and bottom, and the border color and background color of those b tags is what create the roundedness (somewhat anti-aliased).
  • That in itself isn't so bad, but I wish it was more intuitive how he came up with those color values. Fortunately, a code generator is provided: just stick in your choice of foreground/background colors and click the "Show Me The Code" button.
  • The generator itself is closed source: http://www.spiffycorners.com/sc.php
  • Minimum XHTML required: {b {b{b}} {b{b}} {b} {b} {b} ... {b} {b} {b} {b {b{b}} {b{b}}
  • Demo

[edit] fireandknowledge.org

http://www.fireandknowledge.org/archives/2004/05/22/rounded-corners-without-images-part-1/ (Rounded Corners Without Images, Part 1 at Fire and Knowledge)

  • Yep, he did it with all CSS (no images), but...
  • I don't understand how he did it.
  • Minimum XHTML required: {div {div {div}} {div {div}} {div {div}} {div {div}} {div ...} }
  • It still has problems, isn't very robust. For example, when I up the font size in my browser (at all), it breaks.
  • Demo
Retrieved from "http://whynotwiki.com/Rounded_corners"
Personal tools