64x64 icon dark hosting
Choose a hosting plan here and get a free year's subscription to Tuts+ (worth $180).
Advertisement

Quick Tip: Multiple Borders with Simple CSS

by
Gift

Start a hosting plan from $3.92/mo and get a free year on Tuts+ (normally $180)

Did you know that we can achieve multiple borders with simple CSS, by using the :after amd :before psuedo-classes? This is something I recently learned myself! I'll show you how to add more depth to your designs, without images, in just a few minutes.


Final Code


In short, any browser that supports the :before and :after psuedo-elements (all major browsers) can take advantage of this effect. Of course, there are alternatives, including the use of box-shadow, as well as adding additional mark-up to the page; however, this is clean solution that you should definitely consider. Thanks for watching!

Advertisement