Back to the index.
The outline of a box is almost the same as the border.
The outline is not actually a part of the box, it does not count in any way towards the width or height of a box.
Its syntax is the same as for the border: width, style and
color. Unlike a border, adding special instructions for one side of the
outline (like outline-left-width) is not possible. You can define only a complete outline
around the entire element.
p.test {
outline: 3px solid #6374AB;
border: 1px solid #000000;
width: 20em;
}
outline: 3px solid #6374AB;
The invert value is an accessibility feature: it automatically makes the outline stand out from the background by choosing the highest-contrast color.
outline: 3px solid invert;
You can also draw the outline at an offset from the border.
outline-offset: 10px
outline-offset: -10px
outline: 3px solid #6374AB;
outline: 20px auto #6374AB;
Use the keyboard to tab to this link. It has an outline-width: 20px that’s obeyed on Mac, but overruled on Windows and Linux.
In practice, WebKit-based Mac browsers use this style for their keyboard-focused link styles. Windows and Linux do the same, but suppress any defined outline-width.
This is more like an illustration of slight browser incompatibilities: most rendering engines have their own take on inline outlines, and especially how the various line boxes interact. This test does not count for overall compatibility.
This is a paragraph with a very long line box that has outline: 1px solid and should break over several lines and thus show us what the outline is going to do. That should be an interesting experiment, right?
This is a paragraph with a very long line box that has outline: 2px solid and should break over several lines and thus show us what the outline is going to do. That should be an interesting experiment, right?
This is a paragraph with a very long line box that has outline: 3px solid and should break over several lines and thus show us what the outline is going to do. That should be an interesting experiment, right?
This is a paragraph with a very long line box that has outline: 4px solid and should break over several lines and thus show us what the outline is going to do. That should be an interesting experiment, right?
This is a paragraph with a very long line box that has outline: 5px solid and should break over several lines and thus show us what the outline is going to do. That should be an interesting experiment, right?