CSS Design and style... the possibilitiesCSS Design and style... the possibilities

CSS Border Design Challenge

CSS Borders Design - Beauty in Simplicity

I have always been a fan of using borders to add effects to a page or some on page elements. The very first full CSS "makeover" I did, relied heavily on the use of them to create a 3-D effect. The design was for the alltheweb alchemist contest. They have recently reorganized their site so to avoid broken links, I have a screenshot here.

Update: examples have now been submitted. Please see below for futher information and links

Highlighting 3D effects created with borders

The effect shown on the right was originally demonstrated by Chris Hester. His site highlights great Web Design and the site itself features the use of borders to create a CSS 3 column layout..

One of the hardest parts of using borders to create effects is to get the colors just right to show the shading so finding a good color palette is an essential. I have a color palette pending, but there are lots of useful ones out there just find one you like to use.

Borders can be used on all the regular HTML elements or, like in the case of the example to the side, extra ones (divs in this case) can be added to create extra "depth".

CSS Border Property

The base to all the effects shown here is the CSS border-property.

To understand the border-property we first need to understand the rest of the CSS Box Model, now don't be scared it's quite simple really. Repeat after me... All HTML elements are BOXES... with that mantra in hand (or head) we can take that knowledge and use it to create effects.

One Property - Many Uses

What I like is that the CSS Border Property can be applied to any element, and used in different ways it can produce the simplest of effects. e.g. on a recent example I provided to listamatic, I used borders and colours, alone, to simulate the effect of vertical buttons, although it's actually just a list of links. Different CSS applied to the same list then produced some horizontal buttons.

Using CSS Borders on Lists

Lists, <ul>, is only one of the elements you can use borders on, remember I said you can use it on them all!. The most popular article out there in regards to lists actually uses borders in it's example. The article entitled, "Taming Lists", is a favourite quote of many a CSS designer. And although they describe many ways to layout lists their main example uses nothing less than borders to create its visual effect:

CSS Borders everywhere

The uses of borders are as limited as your imagination, Chris's example and the cube to the right, also produced using nothing more than borders, proves that, and todays "fashion" of seperating columns with dotted, or dashed borders is a classic example. CSS gives us the ability to control the border-property value for each side individually, which affords us the flexibility to produce many different effects. Designers are using them in "everyday life" so why not explore the possibilities, then let me see what you can come up with.

CSS Border Design Challenge

Well I've given you some possibilties, now I invite you to let me know your favourite use of the border-property. If you submit an article to me, with an example, I promise to try and feature your example and give you any appropriate credit. So what's stopping you? let your imagination run wild, and I look forward to hearing from you.

Updates:

Resources:

«« To CSS Index »» | CSS Box Model - in laymans terms »»