• 20 heures
  • Facile

Ce cours est visible gratuitement en ligne.

course.header.alt.is_certifying

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Mis à jour le 12/11/2018

Borders and shadowing

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

New chapter, new set of CSS properties. Here, we're going to look at the borders and shadowing effects that can be applied both to the text and the blocks making up our page.

In particular, we're going to reuse our knowledge of colors to choose the color of our borders and shadowing.

Ready to be surprised again?

Standard borders

CSS provides you with a wide selection of borders to decorate your page. Many CSS properties allow you to change the appearance of your borders: border-width, border-color, border-style

To get to the point, I intend to directly use the border super-property which includes all these properties. Do you remember the background super-property? It works on the same principle: we're going to be able to combine several values.

For border, you can use up to three values to change the border appearance:

  • The width: specify the width of your border. Enter a value in pixels (such as 2px).

  • The color: this is your border's color. As we learned, use either a color name (black, red, etc.) or a hexadecimal value (#FF0000) or an RGB value (rgb(198, 212, 37)).

  • The border type: several options are available. Your border can be a single solid line, a dotted line or a dashed line, etc. Here are the available values:

    • none: no border (default);

    • solid: a single solid line;

    • dotted: a dotted line;

    • dashed: a dashed line;

    • double: a double border;

    • groove: a grooved line;

    • ridge: a ridged line;

    • inset: global inset 3D effect;

    • outset: global outset 3D effect.

So to obtain a blue border as a dashed line 3 pixels thick around my titles, I would enter:

h1
{
    border: 3px blue dashed;
}

The next figure shows the various border styles you can use.

Various border styles
Various border styles

At the top, on the right, on the left, at the bottom...

Who said you have to apply the same border to all four sides of your item?
Nonsense, if you want to put different borders depending on the side (top, bottom, left or right), you can do so with no problem. In this case, you have to use these four properties:

  • border-top: top border;

  • border-bottom: bottom border;

  • border-left: left border;

  • border-right: right border.

They are also super-properties which work like border but thus only apply to a single side.

To add a border to the left and right of paragraphs only, we would thus enter:

p
{
    border-left: 2px solid black;
    border-right: 2px solid black;
}

Rounded borders

Rounded borders are a bit like the Holy Grail webmasters have been waiting for since the last millennia (or so it seems). Since the arrival of CSS3, it's now possible to create them easily!

The border-radius property will allow us to easily round the corners of any item. Simply specify the size ("importance") of the radius in pixels:

p
{
    border-radius: 10px;
}

The radius is seen in particular if the item has borders, as shown in the figure below.

Rounded borders
Rounded borders

... or if it has a background color, as in the next figure.

A background with rounded corners
A background with rounded corners

You can also specify the radius shape for each corner. In this case, specify four values:

p
{
    border-radius: 10px 5px 10px 5px;
}

The values correspond to the following corners in the order indicated:

  1. top left;

  2. top right;

  3. bottom right;

  4. bottom left.

Finally, you can refine the rounding of your corners by creating elliptic curves as in the next figure. In this case, you have to specify two values separated by a / character (slash). To see the effect, it's certainly best to test it:

p
{
    border-radius: 20px / 10px;
}
Elliptical rounded borders
Elliptical rounded borders

Shadowing

Shadows are included in the latest innovations provided by CSS3. You now need just a single line of CSS to add shadows to a page!

Here we're going to find out about two types of shadows:

  • box shadows;

  • text shadows.

box-shadow: box shadows

The box-shadow property applies to the whole block and takes four values in the following order:

  1. the shadow horizontal offset;

  2. the shadow vertical offset;

  3. the toning down;

  4. the shadow color.

For example, for a black, 6-pixel shadow, with no toning down, we would enter:

p
{
    box-shadow: 6px 6px 0px black;
}

The result this would give is shown in the next figure (I added a border to the paragraph to show the effect better).

A shadow under the paragraph
A shadow under the paragraph

Let's tone down the shadow using the third setting (figure below). The toning down can be low (less than the offset), normal (equal to the offset) or high (greater than the offset). Let's try a normal offset:

p
{
    box-shadow: 6px 6px 6px black;
}
A rounded shadow under the paragraph
A rounded shadow under the paragraph

You can also add an optional fourth value: inset. In this case, the shadow will be placed inside the block, to give an inset effect:

p
{
    box-shadow: 6px 6px 6px black inset;
}

I'll leave you to try it to see the result.

text-shadow: text shadow

With text-shadow, you can add a shadow directly to the letters of your text! The values work in exactly the same way as box-shadow: offset, toning down and color.

p
{
    text-shadow: 2px 2px 4px black;
}

The result is shown in the next figure.

Shadowed text
Shadowed text

Summing up

  • You can apply a border to an item using the border property. You have to specify the border width, color and type (solid line, dotted line, etc.).

  • You can round the borders using border-radius.

  • You can add a shadow to text blocks using box-shadow. You have to specify the shadow vertical and horizontal offset, it toning down level and its color.

  • The text can also be given a shadow using text-shadow.

Exemple de certificat de réussite
Exemple de certificat de réussite