Introduction to CSS3 – Part 2: Borders

by on 7th May 2008 with 46 Comments

For the second part of our series on CSS3, we’ll be taking a look at borders. Everyone who uses CSS is familiar with the border property – it’s a great way to structure content, create effects around images and improve page layout.

CSS3 takes borders to a new level with the ability to use gradients, rounded corners, shadows and border images. We are going to look at each of these in a bit more detail, using examples where possible.

All the examples shown below can be seen at our CSS3 examples page. Many, however, can only be appreciated in the latest builds of various browsers:

View the live examples page

Rounded Borders

Achieving rounded borders using current CSS coding can be tricky – there are numerous methods available, but none are extremely straight forward. Creating individual images for each border is often needed in addition. Using CSS3, creating a rounded border is incredibly easy. It can be applied to each corner or individual corners, and the width/colour are easily altered. The CSS code is:

.border_rounded {
background-color: #ddccb5;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid #897048;
padding: 10px;
width: 310px;
}

Rounded CSS3 Borders

Gradients

Gradient borders can look effective if used correctly. This code is a little more complex, requiring you to define each colour of the gradient. The CSS code is:

.border_gradient {
border: 8px solid #000;
-moz-border-bottom-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
-moz-border-top-colors:  #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
-moz-border-left-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
-moz-border-right-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
padding: 5px 5px 5px 15px;
width: 300px;
}

Gradient CSS3 Borders

Box Shadows

Adding a shadow to an element is difficult at present – it is a good way to differentiate a certain area, but as with any effect, it should be used sparingly. The CSS code is:

.border_shadow {
-webkit-box-shadow: 10px 10px 5px #888;
padding: 5px 5px 5px 15px;
width: 300px;
}

Shadow CSS3 Borders

Border Images

Border images are one of the most useful additions – I’m really looking forward to discovering how people choose to use them. CSS has the ability to repeat, or stretch a border image as you choose. The CSS code is similar to the following (it varies between browsers at present):

.border_image {
-webkit-border-image: url(border.png) 27 27 27 27 round round;
}

Image CSS3 Borders

In conclusion…

Borders are revolutionized! These additions in CSS3 are bound to save you a huge amount of time as a designer. They go a long way towards simplifying layouts and allow you to create visually appealing boxes without even opening Photoshop.

The next article in this series will be expanding on a new area in CSS3, Text Effects. Remember, to see live examples of these features, take a look at our CSS3 example page.

Other posts in the series

Comments & Discussion

46 Comments

  • Virgil

    None work with IE 7 and Shadow and Image boders don’t even work in Firefox 2 (of which I downloaded the latest version last week).

  • Virgil Viall

    It is always better to use older coding since most browsers are backwards compatible with older code.

  • http://www.ndesign.si Marko Novak

    It’s very hard for web designers to make top notch design using new approaches, since you’re so limited by older versions of browsers. You have to make sure the website degrades gracefully. But this takes too much time.

  • http://www.designshack.co.uk David Appleyard

    At present, CSS3 is certainly not supported by most major browsers. The only two which do support most of these are Safari 3 and Firefox 3 Beta. Until the various modules are completed, browsers won’t implement them.

    This is a guide which will hopefully give you a preview of what to expect when CSS3 does start to be more widely supported.

  • http://www.jabz.biz/ Jab

    For In-House projects I completely rely on Firefox. There is no time to lose and I want CSS3. Remember these old buttons “optimized for Netscape 0.1″? That`s what I do…I try to pull all my visitors away from IE or other lame browsers.

  • http://www. Ziongem

    The border image is something that is needed today. I’m really glad it will be implemented.

  • http://mondolibero.wordpress.com/ Mondo Libero

    Thanks for this work, it can be very useful

  • http://www.guesshimself.com GUESS

    @Virgil: You can use CSS3 as a “progressive enhancement” for now. It won’t affect the look in browsers that don’t support CSS3, but the browsers which do will get a little something extra.
    As CSS3 builds off of the CSS2 specs, it will gracefully degrade.

  • http://www.thebrandsurgery.co.uk Ben

    Thanks for the articles, great intro.

    I can forsee some awful implementation of images in borders though ;)

  • http://www.hephoz.de Galeff

    You are using “-moz-border-radius” and “-webkit-border-radius” which is not part of the CSS3 standard. Standard is “border-radius”.

  • http://www. Sunny

    can you describe the border-image property better?

  • Pingback: 20 Useful Resources for Learning about CSS3

  • Pingback: Web Designer Notebook » An Ode To Border-radius

  • http://www.richcoder.com venu gopal rao nimmala

    This is great work.

    Note: CSS code is not validated and not support for ie7 and below. If you have any solution for ie7 and ie6. That is useful for me. Thanking you advance.

  • ajay

    wow !!!!!!!!! its amazing cant’ wait to tell it other !!!!!!!!!

  • Pingback: Take Your Design To The Next Level With CSS3 « Smashing Magazine

  • matheen

    CSS 3.0 is really great but we have to wait for all the browsers until they start supporting it, as IE is a major browser for more than 70% users across the world

  • Pingback: CSS3 Tips (Tutorial) « Sadhas Blog

  • Pingback: Getting Started With CSS: 20 Awesome Introductory Tuts

  • Pingback: Tutte le nuove caratteristiche dei CSS3 « Beaver Magazine

  • http://www.owlfolio.org/ Zack

    I am a Mozilla developer.

    You should know that -moz-border-colors is not part of any standard. It’s an internal hack for themes’ sake. We are discussing a less awkward way to do the border gradient effect you used it for.

  • http://www.forepoint.co.uk Shaun

    @venu gopal rao nimmala: CSS3 has not been officially released so as a result it is not current in the CSS specification so it will not be valid. Also there is no version of IE that supports it.

    @matheen: Why should we wait until more browsers support CSS3 before we start implement it? If we start implementing now for the browsers that do support it, it will benefit anyone who has a modern browser and anyone else will not loose anything as they will not be aware it should be there.

  • Pingback: 朝心 » [转]提升你设计水平的CSS3新技术

  • http://www.webonbhim.com sunder

    It is always better to use older coding since most browsers are backwards compatible with older code.

  • Pingback: CSS3 Getting started Articles | W4WEB International | Goodies for Web Developers and Designers

  • http://www.wildriverdesign.net Jason

    my biggest problem with borders happens when I’m doing a chart layout where I need to display data and replicate a table look and feel or even just style a table but I usually only want lines (borders) dividing each column and then of course each row but then I end up with lines on one side or the other or doubled… when I really want no borders around the outside, just inside so it looks nice and neat…

    anyways, great article, cool stuff! thanks

  • http://www.thumbslinger.com Kelly

    What’s funny is that, from a design perspective, none of this is new.

    There were illuminated texts from 1472 ad and before that had decorative borders….but, since the technology is just catching up, does that mean we use it?

  • http://wordpress.ichalzeya.com ichal

    Cool posting,good luck

  • Srikanth

    Rounded borders is not working in IE6,IE7 AND IE8, plz tel me how to work in these browsers

  • http://www.abc.com praveen

    CSS 3.0 is really great

  • http://www.abc.com praveen

    CSS 3 is good. but its not working in IE 7.0.57

  • Pingback: 用CSS3将你的设计带入下个高度 - lanmiz.net

  • gloofer

    I see lots of complains about lack of support in IE. IE 9 is supposed to support css3, but to what extend remains to be seen, until then, as long as the website is functional in all or most browsers, let the users wise enough to use modern browsers see all the css3 goodies and the rest can stick with a little less appealing site, simple as that. What I mean is that if you for some strange reason want to use a Microsoft browser don’t yell at the designers using css3, but at Microsoft not supporting it.

  • http://www.digitalextrememediagroup.com Digital Extreme Media Group

    What a great collection for web designers. Thanks for posting. I didn’t know there were so many border option. Thanks again for sharing.

  • Pingback: Lynn's Blog - 网页编程|XHTML+CSS|HTML5|CSS3|AJquery|JS|AJAX|WordPress|Flash|Asp.net|Video

  • Pingback: Paradigm.ru » Blog Archive » Браузерный meme

  • http://www.addyarora.com Addy Arora

    great article….keep working on it…thanx

  • Pingback: Farbverlauf im Border - XHTMLforum

  • Pingback: 50+ Stunning CSS3 Articles, Cheat Sheets and Tutorials Collections - tripwire magazine

  • Pingback: Introduction to CSS3 – Part 1 | De4design Blog

  • http://fekrenaw.com Rahmat

    Good! but it is not pure css
    you can use border-radius instead of -moz-border-radius or -webkit-border-radius

  • Pingback: 20 Useful Resources for Learning about CSS3 | Grafo

  • Pingback: 20 Useful Resources for Learning about CSS3 | Graphic Techniques

  • Pingback: 20 Useful Resources for Learning about CSS3 | Kappa Techie's Tips and Tricks

  • Fexell

    Rahmat: Are you stupid? It seems like you don’t even know WHY you’re SUPPOSED to have -moz- or -webkit- included. Noob.

  • Hans

    I can see the power of CSS too bad its not uniform across browsers. :(

Subscribe
Membership
About the Author