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

CSS version: CSS 2.1
Value: [outline-color || outline-style || outline-width] | inherit
Initial: see individual properties
Applies to: all elements
Inherited: no
Few points to note:

  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;
<button class="mybtn">button value</button>
  <img src="/img/elephant1_small.jpg">
  <span class=myspn>hello world hello world hello world hello world </span>



Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit


Click here to write/view comments