CSS3 Outline Property
If we want to apply a second border to the HTML elements other than the border we apply with the border, we can use the Outline property.
With the Outline feature, the style, color and thickness of the lines are determined. With the Outline-offset property, the distance between the outline and the border is determined.
outline: 1px solid blue;
outline-offset: 20px;
Lines created with Outline do not take up space. Let's explain it like this: When calculating the space occupied by the html element, width, margin, padding and border properties are collected. The Outline property does not take this into account, so it does not affect the space occupied by the element.
Accordingly, the Outline line may overlap elements around the label to which it is applied.
In the Topic Examples, the outline feature has been applied to the two div elements located one under the other, and the outline lines overlap the others because the divs are close to each other. If we want the lines not to overlap, we can increase the margin value, so we can move the boxes away.
For example, you can find the employee version in the Topic Examples section.
Creating an outer border with css, applying a second border to html elements with css, what is the outline property for, applying another border than the border
EXERCISES
In the example, the border is black and the outline is red. Examine the results by changing the margin, padding, outline-offset values.
Read 522 times.