CSS outline – the border which will not break your layout

If you wish to mark an element with a border you will also change the rendered size of the content. So that is where the “outline” property comes handy.
You probertly have allready seen it, when something gets focus many browsers adds an outline to that element with say a dotted thin grey outline.
You can use it simply by adding some CSS to your page. Below you can see the defined styles with a 4px red outline.

The border styles defined

  • none outline: 4px red none
  • dotted outline: 4px red dotted
  • dashed outline: 4px red dashed
  • solid outline: 4px red solid
  • double outline: 4px red double
  • groove outline: 4px red groove
  • ridge outline: 4px red ridge
  • inset outline: 4px red inset
  • outset outline: 4px red outset
  • window-inset outline: 4px red window-inset
Releated
US

Leave a Reply