Did you find this useful?
Socialize it today.


CSS3 Outline-Offset Property

Friday, November 30, 2012

CSS3 has expanded the concept of outlines by including the outline-offset property. This property allows the outline of an element to be offset away from the edge of the specified element. The outline-offset property is generally used to increase the space between the actual outline of the element and where the outline is drawn around the element. The outline-offset property does not affect the positioning of the element or other elements near the element with this property set.


Browser Support

The outline-offset property is supported in all major browsers, except Internet Explorer 10 or earlier (at the time of this writing).


supports Your browser should support CSS3 outline-offset property.

Syntax

The box-sizing property allows you to modify the calculated width and height of an element.


outline-offset: length|inherit;


ValueDescription
lengthSpecifies the distance the outline is offset from the border edge. Negative values are accepted.
inheritSpecifies that the value of the box-sizing property should be inherited from the parent element.


Usage

The purpose of the outline-offset property is to simply provide an offset to the outline.


Example

In this example, a paragraph will contain some content and the div element under the paragraph will be styled with an outline and the offset. You should note that the outline does not take up space so it does not affect the position of the paragraph element and/or its content.


<!DOCTYPE html>
<html>
<head>
<style> 
#outlineOffset {
width:200px; 
padding:20px;
height:70px;
border:3px solid #ffaa00;
outline:3px solid #7f7f7f;
outline-offset:20px;
} 
</style>
</head>
<body>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, s...</p>
<div id="outlineOffset">This div has its outline offset 20px outside of the border edge.</div>
<p>Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet ne...</p>

</body>
</html>

Results

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. Donec fermentum.

This div has its outline offset 20px outside of the border edge.

Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat. Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst.



If your browser supports the outline-offset property, you will note in the example that the outline is outset and overlays the paragraph elements that are adjacent to the div element. If your browser does not support the outline-offset (Internet Explorer), you would have seen this as a result.


outline-offset property

Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

HTML CSS and JavaScript Responsive Web Design with HTML5 and CSS3 The Book of CSS3