Outer Frame

A useful but rarely used property is the outer frame or outline.

The syntax for outline is similar to border. However, the parameters for the individual borders cannot be assigned to the frame. Example:

/* Solid black frame that is 10px thick */
outline: 10px solid black;

This is the shorthand syntax for the outline property. Here are some of the individual properties:

outline-width: 10px;  /* Thickness */
outline-style: solid; /* Style */
outline-color: black; /* Color */

The outer frame is always displayed outside the element, does not affect its size, and does not take up space, that is, it is displayed above other elements.

You can change the position of the frame using the outline-offset property. A positive value moves the frame away from the outer edge of the element, while a negative value pulls it inward.

outline-style has the same values as border-style. By the way, we also have the interesting frame types ridge and groove. They are used to create 3D frames.

Let’s try this all out in practice.