The Art & Science of CSS Rounded Corners (and beyond)

Tweet

The Art & Science Of CSSAs you may well have noticed by now, our new advanced CSS book — The Art & Science Of CSS — has been officially released across the site, although it’s been available for a little while if you’d looked.

If you’re interested but held off purchasing till now, you’re in luck. Use this link to get a $10 discount on The Art & Science of CSS PLUS select a free poster of your choice (DHTML/CSS/Linux/PHP).

Make no mistake: this offer auto-expires a week from today, so don’t wait too long if you want to use this discount link.

Silver plated frame example - corners and beyondOnto the book’s content.

An entire chapter of Art & Science (chapter 6) is dedicated to the implementation of rounded corners. Looking at all the online tools, articles, blog posts, head scratching and sometime teeth-gnashing focussed on the issue over the last 5 years, it is probably not all that surprising.

However, as Jina demonstrated in her ‘Breaking Out of the Box‘ feature article, it’s easy to forget sometimes that many of the techniques filed under ’rounded corners’ are capable of much more than plain old curved boxes. An example I really liked from the book was this (left) faux silver-plated, art noveau frame.

To get you thinking outside the rounded square, I thought we might look at some alternative non-rounded corner design options with an ‘olde worlde feel(ey)’.

1) Antique mapsMaps

Kings and queens always loved a good map and happily paid a mint for them, so cartography has always attracted the most highly-skilled artisans of their day . These people took great pride in their finished product and their work rarely lacked for fascinating detail or thoughtful decoration.

There are a number of antique map sites out all containing plenty of potential inspiration.

2). Art Deco design elementsArt Deco

The linearity of much art deco seems to make it perfect for translating into CSS layouts, so it’s little bit of a surprise that it’s been used so sparingly in online design till now. Fortunately for us a lot of art deco/art nouveau design has already been translated into ready to use vectors or fonts. Golden Studios sell an impressive range of vector borders and old Americana style art perfect for translating into online design. You can also find a nice selection at Specialty Fonts that may get your thought processes turning over.

3). Comic layoutsComics and Hand-drawn Art

Although comic books would appear to be the epitome of box design, I think there’s something nice about the loose, imperfect way their boxes are drawn — especially to eyes that are used to the laser sharp lines of most HTML. Comic book cell borders constantly over shoot their corner point and nothing is ever quite perfectly perpendicular.

Of course, that’s the charm, and it wouldn’t be terribly difficult to distill that organic, loose feel down into a flexible CSS layout using one of the standard rounded corners techniques.

Two things I try to keep in mind when using these types of design tricks. Firstly, no matter how hard you try, distinctive style elements like these are not going to suit every project. Trying to give a PC retailers website a ‘Victoriana’ feel is probably not going to work — unless you’re a design genius.

Secondly, try not to be too literal when referencing past work. For example, if you’re using cartographic imagery to flavor a new blog design, don’t try to recreate the whole map in the design — pick a couple of nice elements to spice things up, and then play them down in the design.

Of course, there are almost endless possibilities. Hopefully this has been something to get your mind ticking over at least.

** P.S. Don’t forget: If you want the book, make sure you use this link to lock in the $10.00 discount.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Kaystarmaker

    Well crap, I just bought it last week for 10 bucks more. >_

  • Kaystarmaker

    ..and then it ate half of my message, too! ( ;P )

    what I said was: “Well crap, I just bought it last week for 10 bucks more >_”

  • Kaystarmaker

    Good morning all, forgot to escape (twice). Again: “Well crap, I just bought it last week for 10 bucks more >_< Still exited though!

  • shea

    ^^ After all that it contains a glaring typo. You’re doing well buddy! ;)

  • http://www.saumendra.com Saumendra Swain

    Apart from the A List Apart , website i dont think this book will make any impact as such. The same technique with many flavours.

  • Sebastiaan Stok

    Tomorrow I neat the perform some maintenance on my server, but after i get my self a paypall account and by-it!

    I Read the example and was very impressed.

  • http://www.kisanbhat.com Kisan

    I too paid $ 10 more.

  • U.P. Web Maestro

    I bought this at Amazon where I’d found it through random search, and kicked myself when I saw the chance here to get a few bucks off and even get a cool poster. That being said, this is the first book I’ve bought in a long time that is worth way more to me than I paid for it. I’m only half way through it, and my brain is already overwhelmed with the upgrades to my toolkit. There are some genius approaches here. Thank you for this book. Make more just like it. (But different.)

  • Bob

    A quick check at Amazon, I see this book is only $26.37 with FREE shipping.

  • http://www.sitepoint.com AlexW

    A quick check at Amazon, I see this book is only $26.37 with FREE shipping.

    True, Bob, but you can’t won’t get your choice of any of the available wall posters ($10 value) purchasing via Amazon, and shipping is often far less than that.