In the last chapter we learned how to adjust the colors and backgrounds of our elements.

But CSS allows you much more options to stylize your site and improve your web design.

In this chapter, we're going to take a deeper look at the borders and shadowing effects, the latter of which can be applied both to block elements as well as the text contained within them.

Everything we learned during the previous chapter will come in handy as borders and shadows make use of colors and function in a somewhat comparable way to backgrounds.

Let's start with borders.

Borders

The CSS language offers you a wide selection of properties to decorate your elements with borders.

The three main properties we will use are border-width, border-style and border-color which respectively control the width, style and color of your borders.

Here is how they work.

The border width specifies the size of your border and takes a length value. I recommend using pixels as a unit but feel free to use any of the length units we saw in the Text formatting chapter.

The border color is the color of your border. As we learned in the previous chapter, you can either type the color's name (e.g. red), its hexadecimal code (e.g. #f00) or its RGB value (e.g. rgb(255, 0, 0)).

The border style is a bit different. You have several options available to customize your border depending on the type of effect you're going after. You can choose between a straight line, a dashed line or even a dotted line.

Here are the values it can take:

• solid : a single solid line
• dashed : a dashed line
• dotted : a dotted line
• double : a double solid line
• groove : a grooved line
• ridge : a ridged line
• inset : a 3D inset line
• outset : a 3D outset line
• none : no border (default)

To give you a clear idea of the different effects you can take a look the following graphic.

Let's test these new properties.

p
{
    border-width: 3px;
    border-style: dashed;
    border-color: deeppink;
}

And here is the result you should obtain in your browser.

You can of course experiment with these properties by modifying their values as much as you wish.

Indeed, having to define three properties for a single element's borders can quickly make your code lengthy and redundant.

Luckily, CSS allows you to use the border super-property which combines all three properties we just discovered.

Remember super-properties from the previous chapter?

Super-properties or shorthand properties allow you to condense multiple CSS properties into a single line of code.

Here is how border works.

border: <border-width> <border-style> <border-color>;

If we were to revise our example to make use this new super-property.

p { border: 3px dashed deeppink; }

This code produces the exact same result as the longer one shown a bit higher up.

Individual borders

As of now we learned how to adjust the borders around a given HTML element.

But you may have noticed that the border super-property affects every side of the rectangular block.

In reality, each element possesses four individual borders for each geometric side (top, bottom, left, right).

You can decorate them separately with these four super-properties.

• border-top : the top border
• border-right : the right border
• border-bottom : the bottom border
• border-left : the left border

While they only apply their style to a single side, they are super-properties and work in the same way as border.

Here is how you can use them.

p
{
    border-top: 5px solid deeppink;
    border-right: 20px groove red;
    border-bottom: 5px solid deepskyblue;
    border-left: 20px double orangered;
}

You can see the result in the following figure.

These are in fact super-properties.

In the same way that border combines the properties border-width, border-style and border-color, you can also write border-top-width or border-left-style.

For example.

p
{
    border: 5px solid orangered;
    border-top-color: deeppink;
    border-bottom-style: double;
    border-bottom-color: deepskyblue;
}

Here are some of the results you can obtain with a little imagination.

You don't have to apply a border to every side.

You can add a single border above or below your element if you want using the appropriate CSS property.

Rounded borders

So basic CSS borders are pretty cool.

But since CSS3 came around, you can go even further in customizing your borders with the rounded border feature.

The property you will need is border-radius and it takes between one and four values.

The values represent the radius ("amount of roundness") of each corner of the borders or background belonging to your element.

Let's start with the simplest case.

If you indicate only one value, every corner will have the same radius.

border-radius: 15px;

The effect is only seen if you first define a border, as shown in the image below.

The rounded effect works on borders but also on backgrounds.

p
{
    background-color: orangered;
    border-radius: 15px;
}

Here is an example.

This covers the simplest case of rounded borders in CSS: when every corner has the same amount of roundness.

There are of course many more options.

Multiple radius values

You can also specify the radius of each corner.

In this case the property border-radius will take four values.

border-radius: 10px 25px 10px 25px;

These values correspond to the four corners in this order:

• top left
• top right
• bottom right
• bottom left

You just have to remember that it starts from the top left corner and goes clockwise.

You don't have to enter exactly four values either.

Here are the different scenarios based on the number of values you indicate.

border-radius: <all corners>;
border-radius: <top-left and bottom-right> <top-right and bottom-left>;
border-radius: <top-left> <top-right and bottom-left> <bottom-right>;
border-radius: <top-left> <top-right> <bottom-left> <bottom-right>;

If it seems confusing simply refer to the following visual aid.

In practice, you only need to remember the first and last rule (one and four values) as they are the most common.

Elliptic corners

There is one last feature of the border-radius shorthand property that we're left to discover: how to create elliptic corners.

To create elliptic curves you must specify two values per corner, separated by a slash character (/).

The first value is the horizontal radius and the second is the vertical radius.

border-radius: 20px / 10px;

Having different values is what creates the elliptic curve.

You can see a few results below.

This covers every use of rounded borders in CSS.

Box shadow

Adding a shadowing effect is one of the latest features of CSS3.

Since a picture is worth a thousand words, this is an example of the effect you can obtain with CSS.

Pretty cool?

So let's learn how to add this effect to some of our elements.

The property you will need is box-shadow. It takes anywhere between two and five values.

Two is the strict minimum, representing the horizontal and vertical offset of the shadow.

Here is an example.

div { box-shadow: 5px 5px; }

This is the simplest and most straightforward use of this property.

A horizontal offset of 5 pixels and a vertical offset of 5 pixels.

The result of this code is shown in the example A of the figure below.

As you may have guessed from the image, there are many more ways to customize your shadows using this property.

But to do so we will need all five values not just the two mandatory ones that we used in our demonstration.

Here are the five values the box-shadow property can include.

• Horizontal offset (mandatory). The horizontal distance between the shadow and the element. In other words the horizontal "size" of the shadow. A positive value will shift the shadow to the right whereas a negative value will shift it to the left.
• Vertical offset (mandatory). The vertical distance between the shadow and the element. In other words the vertical "size" of the shadow. A positive value will shift the shadow to the bottom whereas a negative value will shift it to the top.
• Blur radius (optional). The amount of blur applied to the shadow. By default it is worth 0, making the shadow the sharpest it can be.
• Spread radius (optional). The spread of the shadow relative to the size of the element.
• Color (optional). The color of the shadow. If left unspecified it will usually be the same color as that of the text inside the element.

The first four are length values and, with the exception of the blur radius, they all support negative values.

Let's try it out.

h1
{
    background: deeppink;
    box-shadow: 5px -5px 0 0 black;
}

div
{
    background: orangered;
    box-shadow: -7px 10px 5px -5px deepskyblue;
}

This is the result you should get.

You can play around with this property until you get the effect that you want.

Inner shadows

Rather than a drop shadow, you can create an inset shadow simply by adding the inset keyword before or after the other values.

box-shadow: inset 5px 5px 3px 0 #f00;

Here are some of the results you can obtain by playing around with box shadows.

The inner shadow effect is most visible on the bottom three examples.

Text shadow

We just learned how to apply box shadows to our web page's elements with CSS.

But there is another type of shadow we can use, the text shadow.

As it's name implies, it adds a shadowing effect not to the element itself but to each letter of the text.

Here is a demonstration.

The property we need to handle text shadowing is text-shadow.

Here are the values it accepts.

• Horizontal offset (mandatory). The horizontal distance between the shadow and the text. In other words the horizontal "length" of the shadow. A positive value will shift the shadow to the right whereas a negative value will shift it to the left.
• Vertical offset (mandatory). The vertical distance between the shadow and the text. In other words the vertical "length" of the shadow. A positive value will shift the shadow to the bottom whereas a negative value will shift it to the top.
• Blur radius (optional). The amount of blur applied to the shadow. By default it is worth 0, making the shadow the sharpest it can be.
• Color (optional). The color of the shadow. The default color will depend on the browser.

As you can see, these are very similar to the values of the box-shadow property except for the spread radius option which is not used for text shadows.

This means that text-shadow will have at most four values.

Here is an example of a very simple text shadow effect.

text-shadow: 3px 3px;

And a slightly more advanced one.

text-shadow: 5px 5px 7px #f00;

With a little creativity, you can easily create very cool text effect with just this property.

Multiple shadows

Lastly, you should know that you can easily create multiple shadows by separating them with a comma.

This works both for box shadows and text shadows.

Demonstration.

div
{
    box-shadow: 5px 5px 0 0 #f0f, -3px -3px 1px 2px #f00;
    text-shadow: 1px 1px 1px #000, 3px 3px 5px #f00;
}

Here are some of the effects you can obtain by using multiple shadows.

This concludes our chapter on borders and shadows in CSS.