Outline

Necessary?

[Hester]

Currently only Opera 7 supports outline - Mozilla and Internet Explorer do not - at least on the PC. What it does is produces an outline (surprise!) around any element such as an input text field or button. So why not use border? Because... the differences between outline and border are as follows:

• The size and shape does not interfere with the document flow. Outlines are drawn on top of the surrounding items
  
• You can only set the properties for all four sides at once. There's no top, left, right or bottom
  

So, like me, you might be wondering why bother with outlines at all. They are intended to allow you to program colour changes on :focus and :hover, but these can surely be attained with border anyway.

There is one interesting nugget to be gained from the W3C outline specifications [w3.org] though:

Outlines may be non-rectangular

Wowee! Does this mean we can have rounded shapes? Or parallelograms? Once again though it's something borders might be capable of, with Mozilla having 'secret' code for rounded corners.

So what is the true purpose of outline when border offers the same thing (be it adding to the width of the element, yet allowing separate sides to be differently styled)?

[BlobFisk]

Nice post, Hester, I'm off to read up on Outlines - something I was not very familiar with.

Cheers!

[drbrain]

Outlines may be non-rectangular. For example, if the element is broken across several lines, the outline is the minimum outline that encloses all the element's boxes.

So an outline will enclose multiple line boxes, unlike a border. You don't get fancy shapes like trapezoids and stuff. :(

This is bugzilla bug 6647, if you have a bugzilla account, vote for it.

[grahamstewart]

Outline would be VERY useful when trying to debug a layout.

While I'm developing I frequently add the rule

div {
border: 1px solid red;
}

to my stylesheet so I can figure whats going on.

But this is not prefect because borders are included in the document flow (so I may have to ignore the fact that my debug border causes a scrollbar to appear or an element to overflow). If I could do this with outlines then life would be easier. :)

[Hester]

Well download Opera and give it a go!

[grahamstewart]

I've got Opera and it works well (although it sometimes still causes a scrollbar to appear which I don't think it should).

The thing is that Opera usually behaves itself, so typically its a layout thats broken in IE that I am trying to fix! :)