CSS3 Series, Part 4: Borders, Shadows, and Gradients

In this third installment of our CSS3 Series, we are diving right into several elements that are sure to make any website stand out from the crowd: Borders, shadows, and gradients. If you have been following along with our series, you’ve learned about transitions and infinite scrolling, both techniques that can give your website visitors a smooth and engaging user experience.

Borders

In order to get the achieved borders or rounded corners in the pre-CSS3 era, designers had to turn to Photoshop and use images to create this style. By using CSS3, designers are now able to render rounded corners, styled borders, and multiple borders faster than ever. Each corner can be styled independently using the individual border-radius property (border-bottom-left-radius, border-top-left-radius, etc.) or by creating a unified border style and using just the border-radius property. Below are a few simple examples to achieve different border styles. Keep note, for the best possible browser support, you should always include the vendor prefix (-webkit- and -moz-:).

A	B
Example A: Bottom right corner radius.	Example B: Two-value border radius.
C	D
Example C: Ellipse shape using value of 50% and defined width.	Example D: Circle shape using only the value of 50%.

Gradients

This feature allows us to apply multiple color declarations to one element without the use of images. Using gradients can add depth to backgrounds and complement navigation and buttons, while being flexible, scalable, and fast to implement. There are two primary methods: radial and linear. This effect is achieved by using the background-image property. The example below shows both the linear and  radial methods.

Box shadows

The box-shadow property allows you to easily add a shadow to any element. This can help create priority within your content or call out specific areas on your website. As with many of these techniques, this was a challenge prior to CSS3 and required the use of images to achieve.

A	B	C
Example A: Offset shadow	Example B: Inner Shadow	Example C: One-sided shadow

Additional resources

Border Radius Generator
Tools for testing various border radii.

CSS3 Tricks – Gradients
Overview of how to use gradients.

The Ultimate Gradient Editor
Gradient generator with vendor prefixes, sass output and much more.

Let’s start talking