0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>A useful but rarely used property is the outer frame or outline.</p>
1
<p>A useful but rarely used property is the outer frame or outline.</p>
2
<p>The syntax for outline is similar to border. However, the parameters for the individual borders cannot be assigned to the frame. Example:</p>
2
<p>The syntax for outline is similar to border. However, the parameters for the individual borders cannot be assigned to the frame. Example:</p>
3
/* Solid black frame that is 10px thick */ outline: 10px solid black;<p>This is the shorthand syntax for the outline property. Here are some of the individual properties:</p>
3
/* Solid black frame that is 10px thick */ outline: 10px solid black;<p>This is the shorthand syntax for the outline property. Here are some of the individual properties:</p>
4
outline-width: 10px; /* Thickness */ outline-style: solid; /* Style */ outline-color: black; /* Color */<p>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.</p>
4
outline-width: 10px; /* Thickness */ outline-style: solid; /* Style */ outline-color: black; /* Color */<p>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.</p>
5
<p>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.</p>
5
<p>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.</p>
6
<p>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.</p>
6
<p>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.</p>
7
<p>Let’s try this all out in practice.</p>
7
<p>Let’s try this all out in practice.</p>