BlogsDope image BlogsDope

Controlling the Outline Position with outline-offset

May 27, 2017 HTML CSS 7225

The outline-offset property is used to add space between the border and outline of an element. Spacing outline from border does not affect the position of the surrounding elements because it does not take up any space.

By default, the outline is drawn touching the outer border edge, without any distance between the two. In that case, the value of the outline-offset property is 0.

Values

Using this property, we can add both positive as well as negative distance to the outline from the outer border edge. A positive value given to this property will add a positive distance and a negative distance will add a negative distance.

Apart from this, there are two predefined values to this property.

  • initial : This sets the default value of the property.
  • inherit : This sets the value of its parent element.

Positioning outline with respect to border

The outline-offset property defines the distance between the outer edge of the border and the inner edge of the outline.

HTML

<div class="block"></div>
<div class="block" id="offset1"></div>

CSS

.block{
	width: 170px;
	height: 170px;
	background-color: #E6A326;
	border: 7px solid #689948;
	outline: 7px solid #F8470C;
}
#offset1{
	outline-offset: 10px;
}

For the first block, the blue colored outline touches the edge of the green colored border since the default value of the outline-offset property is 0. For the second block, the value is set to 10px and thus the outline is at a distance of 10px from the border.

When a negative value is given, then also the outline moves away from the border, but in the inward direction. This is shown in the following example.

HTML

<div class="block"></div>
<div class="block" id="offset2"></div>

CSS

.block{
	width: 170px;
	height: 170px;
	background-color: #E6A326;
	border: 7px solid #689948;
	outline: 7px solid #F8470C;
}
#offset2{
	outline-offset: -20px;
}	

Since we gave a negative value, the outline moved in the inward direction. Note that 20px is the distance between the outer edge of the border and the inner edge of the outline.

One more point to note here is that the presence of outline does not affect the position of other elements. The reason is as stated earlier, it does not occupy any space.

HTML

<div>
	<div class="block1"></div>
	<div id="para">This text will not overlap with the block outline</div>
</div>
<div>
	<div class="block2" id="offset3"></div>
	<div id="para">This text will overlap with the block outline</div>
</div>

CSS

.block1{
	display:inline-block;
	margin: 40px 0 -10px 17px !important;
	width: 40px;
	height: 40px;
	background-color: #E6A326;
	border: 2px solid #689948;
}
.block2{
	display:inline-block;
	margin: 40px 0 -10px 17px !important;
	width: 40px;
	height: 40px;
	background-color: #E6A326;
	border: 2px solid #689948;
	outline: 4px solid #F8470C;
}
#para{
	display:inline-block;
	margin: 0 !important;
}
#offset3{
	outline-offset: 10px;
}
This text will not overlap with the block outline
This text will overlap with the block outline

In this example, the presence of outline did not affect the position of the adjoining text.

Browser Support

This property is not supported by IEEdge 14 and Opera Mini, although IE 11 and Edge 14 supports the outline property.

The outline-offset property is another application of CSS, which can be used to produce a double border effect with a gap in between the border layers or in any other case where it could be required without affecting the layout of the surrounding elements.


Liked the post?
Inquisitive and passionate Front-end Developer and Web Designer and Co-Founder of CodesDope.
Editor's Picks
0 COMMENT

Please login to view or add comment(s).