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.

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.

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)

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