css outline

an outline is a line that is drawn around elements.the outline property define the style, color, and width of an outline.


the outline are very similar to the border but there are few major differences in borders and outlines:

  • an outline does not take up space
  • outline do not have to be rectangular.
  • outlineis always the same on all sides you never specify different values for different sides of an element.

note :- the outline property are not supported by ie 6 or netscapie 7.

you can set following outline properties using css

  • outline-style:-sets the style of an outline.
  • outline-width:-sets the width of an outline.
  • outline-color:-sets the color of an outline.
  • outline:-sets all outline properties in one declaration statement(shorthand property).

Css outline-style

the outline-style property is used to set the line style for the outline.

css outline-style values:

none:-no outline is drawn.

dotted :-the outline is a single of dots.

dashed :-the outline is a series of short lines.

solid :-the outline is a single solid line.

double :-the outline is double solid line.

groove :-a 3d groove is drawn in colors based on the <color> value.

ridge :-a 3d ridge is drawn in colors based on the <color> value.

inset :-a 3d inset is drawn in colors based on the <color> value.

outset :-a 3d ridge is drawn in colors based on the <color> value.

hidden:-no outline is drawn.


css Outline

the outline-color property is used to set the color of outline.

the border-color value can be set by:

  • name -a color name,(e.g. lime).
  • rgb -a rgb method,(e.g. 122,121,111).
  • hex -a hex value,(e.g. #ff0000).

Css outline-width

the outline-width property is used to set the width of an element outline.

the value of this property could be either a length in px,pt or cm or it should be set to thin,medium or thick.

the outline width cannot be negative.

the width of zero pixels means no outline.

            <title>this is a demo how we can set outline. </title>
            <style  type="text/css" >
                img { outline-style:solid;  outline-width:2pxoutline-color:lime; }
                p{ outline-style:inset;  outline-width:3pxoutline-color:#3a4b9c; }
        h1{outline-style:outset;  outline-width:5pxoutline-color:rgb(122,220,222); }
                <p>see the css outline property effect on paragraph </p>
                <h1>see the css outlne property effect on heading first level. </h1>
               <img src="/css_outline.png"width="200px" height = "100px" />
 </body> </html>

outline -shorthand property

the outline shorthand property allows you to specify color, style, and width fo lines in one property.

                   <style  type="text/css"
                         p  { border:3px double #4caabb; }
                         h1  { border:5px groove #22aa11; }

all css outline properties

outlinesets  all outline properties in one declaration statement.
outline-stylesets the style of an outline.
outline-widthsets the width of an outline.
outline-colorsets the color of an outline.