revision:
An outline is a line that is drawn around elements, outside the borders, to make the element "stand out".
The outline property is a shorthand property for: "outline-width", "outline-style (required)", "outline-color. If outline-color is omitted, the color applied will be the color of the text.
Unlike a border, the outline is drawn "outside" the element's border, and may overlap other content. Also, the outline is "NOT a part" of the element's dimensions; the element's total width and height is not affected by the width of the outline.
outline-width : specifies the width of outline
outline-style : specifies the style of the outline
outline-color : specifies the color of the outline
initial : sets this property to its default value.
inherit : inherits this property from its parent element.
example: outline property
code
<div class="a">A div element with a 2 pixels blue dashed outline.
Also notice that the outline is outside of any border.</div>
<style>
div.a {border: 1px solid red; outline: 2px dashed blue;}
</style>
- specifies the color of an outline. Always declare the "outline-style" property before the "outline-color" property. An element must have an outline before you change the color of it.
invert : performs a color inversion. This ensures that the outline is visible, regardless of color background. Note: Browsers are not required to support this value.
color : specifies the color of the outline.
initial : sets this property to its default value.
inherit : inherits this property from its parent element.
example: outline-color property
code:
<div class="b">The outline-color can be specified with a color name.</div>
<style>
div.b {border: 1px solid black; outline-style: solid; outline-color: coral;}
</style>
- adds space between an outline and the edge or border of an element. The space between an element and its outline is transparent.
length : the distance the outline is outset from the border edge. Default value is 0
initial : sets this property to its default value.
inherit : inherits this property from its parent element.
example: outline-offset property
code:
<div class="d">A div element with a thick outline.</div>
<style>
div.d {outline-style: solid; outline-width: thick; }
</style>
- specifies thestyle of an outline.
none : specifies no outline. This is default
hidden : specifies a hidden outline
dotted : specifies a dotted outline
dashed : specifies a dashed outline
solid : specifies a solid outline
double : specifies a double` outline
groove : specifies a 3D grooved outline. The effect depends on the outline-color value
ridge : specifies a 3D ridged outline. The effect depends on the outline-color value
inset : specifies a 3D inset outline. The effect depends on the outline-color valuespecifies a outline
outset : specifies a 3D outset outline. The effect depends on the outline-color value
initial : sets this property to its default value.
inherit : inherits this property from its parent element.
example: outline-style property
code:
<div class="d">A div element with a dotted outline</div>
<style>
div.d {border: 0.1vw solid blue; outline-style: dotted; outline-color: green; }
</style>
- specifies the width of an outline. Always declare the "outline-style" property before the "outline-width" property. An element must have an outline before you change the width of it.
medium : specifies a medium outline. This is default
thin : specifies a thin outline
thick : specifies a thick outline
length : allows you to define the thickness of the outline
initial : sets this property to its default value.
inherit : inherits this property from its parent element.
example: outline property
code:
<div class="d">A div element with a thick outline.</div>
<style>
div.d {outline-style: solid; outline-width: thick; }
</style>
example 1
code:
<div class="f">The outline-color can be specified with an RGBA value.</div>
<style>
div.f {outline-style: solid; outline-color: rgba(201, 76, 76, 0.3);}
</style>
code:
<div class="g">Notice that the outline is outside of any border.</div>
<style>
div.g {border: 1px solid red; outline-style: solid; outline-width: thick;}
</style>
example 2
code:
<div class="h">A div element with a medium outline.</div>
<style>
div.h {outline-style: solid; outline-width: medium;}
</style>
example 3
code:
<div class="h">A div element with a thin outline.</div>
<style>
div.h {outline-style: solid; outline-width: thin;}
</style>
example 4
code:
div.ex1a { margin: 1vw; border: 1px solid black; background-color: yellow; outline: 4px solid red; outline-offset: 5px;}
example 5
code:
<div class="ex2">This div has a 5 pixels dashed blue outline 5 pixels
outside the border edge.</div>
<style>
div.ex2 {margin: 10px; border: 1px solid black; background-color: yellow;
outline: 5px dashed blue; outline-offset: 5px;}
</style>
example 6
code:
<div class="i">A div element with a dotted outline.</div>
<style>
div.i {outline-style: dotted;}
</style>
example 7
code:
<div class="j">A div element with a ridge outline.</div>
<style>
div.j {outline-style: ridge; outline-color: coral; outline-width: 7px;}
</style>
example 8
code:
<div class="k">A div element with a groove outline.</div>
<style>
div.k {outline-style: groove; outline-color: dodgerblue; outline-width: 7px;}
</style>
Note: The "outline-color" property and "outside-width" property do not work if they are used alone. Use the "outline-style" property to set the outline first.
example: dotted outline
A dotted outline
code:
<p class="spec aa">A dotted outline</p>
<style>
p.aa {outline-style: dotted;}
</style>
example: dashed outline
A dashed outline
code:
<p class="spec bb">A dashed outline</p>
<style>
p.bb {outline-style: dashed;}
</style>
example: solid outline
A solid outline
code:
<p class="spec cc">A solid outline</p>
<style>
p.cc {outline-style: solid;}
</style>
example: double outline
A double outline
code:
<p class="spec dd">A double outline</p>
<style>
p.dd {outline-style: double;}
</style>
example: groove outline
A groove outline
code:
<p class="spec ee">A groove outline</p>
<style>
p.ee {outline-style: groove;}
</style>
example: ridge outline
A ridge outline
code:
<p class="spec ff">A ridge outline</p>
<style>
p.ff {outline-style: ridge;}
</style>
example: inset outline
An inset outline
code:
<p class="spec gg">An inset outline</p>
<style>
p.gg {outline-style: inset;}
</style>
example: outset outline
An outset outline
code:
<p class="spec hh">An outset outline</p>
<style>
p.hh {outline-style: outset;}
</style>
example: outline-color
Codes:
<div id="container"><div id="show"><span id="one">example</span>
</div></div>
<style>
#one {margin: 4vw; padding: 2vw; border-style: solid;
border-color: #f28500 #dc3545; border-width: 1vw; position: absolute;
outline-width: 1vw; outline-style: double; outline-color: darkgreen;
border-radius: 50%;}
#show {margin-left: 3vw; border-style: solid; border-color: red yellow black;
border-width: 1vw; outline-style: groove; outline-color: magenta; outline-width:
1vw; height: 15vw; width: 20vw;}
#container {width:50%; margin:2vw;}
</style>
example: outline-color - features use
How to use the features of the CSS outline property!!
Codes:
<div id="container-1"><p>How to use the features of the
CSS outline property!!</p></div>
<style>
#container-1 {width:75%; margin:5vw;}
#container-1 p {margin:auto; font-size: 2vw; text-align: center;
border-style: ridge; border-width: 1vw; border-color: lightblue;
outline-style: dashed; outline-width: 1vw; outline-color: violet;}
</style>
example: outline-color - border/outline
Codes:
<div id="two">orange outline, green border</div>
<style>
#two{font-size: 3vw; padding: 5vw; margin: 5vw; outline-width: 1.5vw;
outline-style: solid; outline-color: orange; border: 1vw solid green;
text-align: center;}
#two p {font-weight: 700;}
</style>
example: outline-color - invert color
green border with outline-color: invert
green border with outline-color: grey
Codes:
<div id="div2"><p>green border with outline-color: grey</p></div>
<style>
div#div1, div#div2 {margin-left: 3vw; text-align: center; width: 34vw;
height: 10vw; border: 0.5vw solid green;}
#div1 {margin-bottom: 2vw; outline-style: solid; outline-width: 1vw;
outline-color: invert;}
#div2 {margin-bottom: 2vw; outline-style: solid; outline-width: 1vw;
outline-color: grey;}
</style>
example 1: outline-width
Codes:
<span id="thin">thin</span>
<span id="medium">medium</span>
<span id="thick">thick</span>
<span id="twopixels">2px</span>
<span id="oneex">1ex</span>
<span id="em">1.2em</span>
<style>
span:is(#thin, #medium, #thick, #twopixels, #oneex, #em)
{outline-style: solid; display: inline-block;
margin: 3vw;}
#thin {outline-width: thin;}
#medium {outline-width: medium;}
#thick {outline-width: thick;}
#twopixels {outline-width: 2px;}
#oneex {outline-width: 1ex;}
#em {outline-width: 1.2em;}
span:is(#thin, #medium, #thick, #twopixels, #oneex, #em) {margin: 3vw;
padding: 3vw; border-style: solid; border-color: darkgreen crimson;
position: relative; outline-width: 1vw;
outline-style: ridge; outline-color: orange; border-radius: 50%;}
</style>
example 2: outline-width
Codes:
<div id="container-2"><div id="showDiv"><span>example</span></div></div>
<style>
#showDiv {margin:3vw; border-style: solid; border-color:
darkmagenta dodgerblue; outline-style: dotted;
outline-color: black; height: 8vw; width: 8vw;
text-align: center;}
#container-2 {width:75%; margin:3vw;}
</style>
example 3: outline-width
Learning is fun with examples and live running code.
Codes:
<div id="container-3"><p>Learning is fun with examples and live running code.</p></div>
<style>
#container-3 {width:75%; margin:3vw;}
#container-3 p {margin:3vw; border-style: ridge; border-width: 1.5vw;
border-color: lightblue; outline-style: solid;
outline-color: darkviolet;font-size: 2vw; text-align: center;}
</style>
example 4: outline-width
Codes:
<div class="block">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
<style>
.block {margin-left: 3vw; width: 75%; outline-style: dotted; outline-width:
1vw; outline-color: blue; padding: 1vw;margin-bottom: 2vw;}
</style>
example: solid outline
This text is having thin solid outline.
code:
<p style="margin-left: 3vw; outline-width:thin; outline-style:solid;">
This text is having thin solid outline.</p>
example: dashed outline
This text is having thick dashed outline.
code:
<p style="margin-left: 3vw; outline-width:thick; outline-style:dashed;">
This text is having thick dashed outline.</p>
example: dotted outline
This text is having 5px dotted outline.
code:
<p> style = "margin-left: 3vw; outline-width:5px;outline-style:dotted;">
This text is having 5px dotted outline.</p>
example: auto outline
outline demo - 1
code:
<div><p class="auto">outline demo - 1</p></div>
<style>
.auto {margin: 3vw; outline-style: auto; outline-width: 1vw; padding: 1.5vw;
/* same result as "outline: auto" */}
</style>
example: dashed outline
outline demo - 2
code:
<div><div class="dotted"><p class="dashed">outline demo - 2</p></div></div>
<style>
.dotted {margin: 3vw; outline-style: dotted; /* same result as
"outline: dotted" */}
.dashed {outline-style: dashed; outline-width: 1vw; padding: 1.5vw;}
</style>
example: double outline
outline demo - 3
code:
<div><div class="solid"><p class="double">outline demo - 3</p></div></div>
<style>
.solid {margin: 3vw; padding: 1vw; outline-style: solid;}
.double {outline-style: double; outline-width: 1vw; padding: 1.5vw;}
</style>
example: ridge outline
outline demo - 4
code:
<div><div class="groove"><p class="ridge">outline demo - 4</p></div></div>
<style>
.groove {margin: 3vw; padding: 1vw; outline-style: groove;}
.ridge {outline-style: ridge;outline-width: 1vw; padding: 1.5vw;}
</style>
example: outset outline
outline demo - 5
code:
<div><div class="inset"><p class="outset">outline demo - 5</p></div></div>
<style>
.inset {margin: 3vw; padding: 1vw; outline-style: inset;}
.outset {outline-style: outset;outline-width: 1vw; padding: 1.5vw;}
</style>
example: outline-offset
Gallia est omnis divisa in partes tres.
The outline-offset is 1vw
Codes:
<div>
<p id="out">Gallia est omnis divisa in partes tres.</p>
<section>
<div class="box"><h4>Dual border effect with outline and border</h4></div>
<div class="color"><h4>Green outline, black border. Outline-offset.</h4></div>
<div class="ex1"><h4>outline-offset property example</h4><p>The outline-offset is 1vw</p></div>
</section>
</div>
<style>
#out {margin-left: 1vw; width: 25vw; outline: 1px dashed red; outline-offset: 1vw; background: yellow; border: 1px solid blue; }
h4 {text-align: left; margin: 0 4vw;}
section{display: flex; flex-flow: row wrap; }
.box {margin: 3vw; width: 24vw; height: 20vw; background: #ccc; border: solid 1vw yellow; outline: solid 1vw orange;
outline-offset: 2vw;}
div.color {width: 25vw; height: 5vw; outline-width: 1vw; outline-style: solid; outline-color: darkgreen;
outline-offset: 1vw; border: 1px solid black; margin: 4vw;}
div.ex1 { width: 25vw; margin: 4vw; border: 1vw dotted #000; background-color: #8ebf42; outline: 1vw double #666;
outline-offset: 1vw;}
</style>