Outline and Box-shadows

Excerpt

CSS offers several options for borders around HTML elements.

As already seen in door #1 HTML Elements have different "layers" around the read content.

[content] -> [padding] -> [border].

There are 2 more layers that do not calculate in width and height.

Outline

The outline is a layer around the border that will eventually overlap other content.

<span style="outline:.5rem solid lime;">( text here )</span>
( text here )

It can be used for several purpose. One is to provide a 2 color border by combining it with a regular border. By using a margin with the same width the element will not overlap.

<span style="border:orange 2px solid;margin:.5rem;outline:.5rem solid yellow">( text here )</span>
( text here)

Box shadow

The box shadow is a layer around the border that will eventually overlap other content.

<span style="box-shadow: 0 0 0.6rem 0.4rem #4466ee">HERE WE ARE</span>
HERE WE ARE

It has almost the same effect but more options like asymmetric positioning by shifting the rectangle using the first 2 parameters.

The 3. parameter is specifying a with where the color is fading o complete transparent at the outside.

The 4. optional parameter is specifying a with where the color is used in the solid version.

The 5. parameter is specifying the color to be used.

Again it can be combined with a margin to allow flowing the element on the boundaries.

<span style="display:inline-block;margin:1rem;box-shadow: 0 0 0.6rem 0.4rem #4466ee">(no overlap on other
    elements)</span>
(no overlap on other elements)

The box shadow effect can often be seen to highlight the html element with the focus by using a CSS rule like the following one that is also included in this pages source code:

<style>
  *:focus {
    box-shadow: 0 0 0.6rem 0.4rem pink
  }
</style>

Combination

To combine all these effects a 3-color border can be created:

<span style="margin:3rem;padding:0.4rem;display:inline-block;
  box-shadow: 0 0 0 0.8rem black;
  outline: 0.4rem solid red;
  border: 0.4rem solid gold;
  ">(German Style)</span>
<span style="margin:3rem;padding:0.4rem;display:inline-block;
  box-shadow: 0 0 0 0.8rem green;
  outline: 0.4rem solid white;
  border: 0.4rem solid red;
  ">(Italian Style)</span>
(German Style) (Italian Style)

As you can see the box shadow and outline both start outside the border but the outline is in front of the box-shadow. So box-shadow must be thicker than outline.

See also

Tags

CSS