Are you a member? Register or Login

Open Menu

Introduction to CSS3 – Part 2: Borders

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.

The Ultimate Designer Toolkit: 2 Million+ Assets

Envato Elements gives you unlimited access to 2 million+ pro design resources, themes, templates, photos, graphics and more. Everything you'll ever need in your design resource toolkit.

Today only (really, this only happens once a year!), Envato Elements has a flash sale. Save up to 40% on your subscription, and keep that low price for the lifetime of your account!

This is a once-a-year chance to get every creative and design asset you could ever need for the price of a pizza each month.

Today Only - Grab Your Discount!

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:

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:

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:

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):

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