CSS3 User Interface Box Outline Offset

Use CSS3 outline-offset property to offset the outline rendition

Creative CSS

Designing with CSS – Box Outline Offset

Setting an element outline is already available in CSS2, but in CSS3 outline has been expanded to include the outline-offset property. This allows to offset the outline by a specified number of pixels. By default, the outline is drawn starting just outside the edge or border of an element.

The outline is similar to the border of an element, but it is not part of the element’s dimensions, and it is displayed around the margin of the element. Therefore the element’s width and height properties do not contain the width of the outline.

An outline differs from a border in two ways:

  • Outlines do not take up space.
  • Outlines may be non-rectangular.
The outline is the same on all sides. In contrast to borders, there are no ‘outline-top’ or ‘outline-left’ etc. properties.

CSS3 Generator

If you are not very comfortable with CSS, or would like to have CSS codes auto-generated for you to save time, here is a useful and handy tool called CSS3 Generator. This simple tool created by Randy Jensen could be used for most basic design elements like rounder corners, box-shadow, text-shadow, etc on your webpages. It will create some cross-browser CSS3 code based on whatever values you want.

Box Outline Offset

You choose outline thickness, style, and color. The code will be generated.

Your Code:

outline: 5px outset #c70c15;
outline-offset: 10px; /* Delete if you don't want an offset */ 

If your browser supports CSS3 outline-offset property, I give you below an example of a box outline with and with out an outline offset.

Example of CSS3 User Interface Box Outline Offset

CSS Code:

width: 300px;
height: 200px;
padding: 10px;
border: 2px solid silver
margin: 20px;
outline: 5px ridge gold;
outline-offset: 10px;

Example (Box Outline: Offset)

CSS3 Box Outline – Offset
This box has both a 2 pixel silver border, and then a 5px gold outline that is offset by 10 pixels.
Outline offset sets the amount of space between the outline and the border or the edge of the element.

Example (Box Outline: No Offset)
In the box below the outline offset is removed.

CSS3 Box Outline – No Offset
This box has both a 2 pixel silver border, and then a 5px gold outline that is not offset beyond the border edge.
By default, the outline is drawn starting just outside the border edge.
Browser Support
Box outline offset is currently only supported in Firefox 3.0+ Chrome 4.0+ Safari 3.1+ Opera 10.5+ IE 9.0+
Check it out! Whether it works for you or not, please share with me by writing a comment, and mentioning your browser and version. Your feedback would be immensely helpful.
CSS3 Generator
W3C CSS3 Basic User Interface Module
This module describes selectors and CSS properties which enable authors to style user interface related states, element fragments, properties and values.
CSS3 Box Outline Property
Web Host for your WordPress Blog
If you are looking for a web host that will provide hosting environment for WordPress, BlueHost is one of the best choices. My website and blog are hosted by BlueHost.
Click Here to Signup for BlueHost
Small Business Website Design
Get a professionally designed special custom five-page website ideal for small business that need an online presence as well as personal sites or informational sites at an amazing price of only $125.
Visit our website to learn more about Small Business Website Design

CSS3 User Interface Box Sizing
Use CSS3 box-sizing property to alter the default CSS box model
More CSS3
Related Posts with Thumbnails
Admin/Author Admin/Author: Subrato Paul, owner of GoldenTwine Informatics founded in April 2003, lives in Kolkata, India. He is a freelance website designer, Internet marketer, social media enthusiast, and blogger. He writes in his blogs and as a guest writer about marketing and social media, eCommerce, website design and development, and his website.
RSSDid you like this article? If you're new to goldenTwine blog, you may want to
Subscribe to RSS feed: | Comments RSS | Email Subscription
Social Media:
Short Link: https://wp.me/pPMoR-pR | Thanks for visiting!

One Trackback

Post a Comment

Your email is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Notify me of followup comments via e-mail. You can also subscribe without commenting.

This site uses Akismet to reduce spam. Learn how your comment data is processed.