CSS outline – create outline around an element

CSS outline property can be used to create outlines around visual objects such as buttons, active form fields, image maps, etc. It it different from css border. Few points to note about outline

1. Outlines do not take up space.
2. Outlines may be non-rectangular.
3. The outline is drawn just outside border edge.

CSS property outline

1. To inherit outline from parent, value inherit can be used. By default outline is not inherited.
2. We can also separately define outline-width, outline-style and outline-color.
3. Some commonly used style values are solid, dotted, dashed, etc.

Example – css outline

Note that outline not taking any extra space here (hence overlapping of outlines).

<style type="text/css">
div {width:150px; background-color: lightgray;}
.mybtn {
 outline: 2px solid lightgreen;
}
.myspn {
 outline: 2px solid red;
}
</style>
<button class="mybtn">button value</button>
<div>
  <img src="/img/elephant1_small.jpg">
  <span class=myspn>hello world hello world hello world hello world </span>
</div>

Related

• CSS outline-color
• CSS outline-style
• CSS outline-width

Specification

• W3C CSS 2.1 outline specification