Scribd
Upload
15 views

CSS Outline 3rd Finals

The document provides an overview of CSS outlines, detailing properties such as outline-style, outline-color, outline-width, and outline-offset. It explains how outlines differ from borders, including their placement and impact on element dimensions. Additionally, it includes examples demonstrating the use of these properties in HTML and CSS.

Uploaded by

Fiel Paulo Mamucod Fabian
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
15 views

CSS Outline 3rd Finals

The document provides an overview of CSS outlines, detailing properties such as outline-style, outline-color, outline-width, and outline-offset. It explains how outlines differ from borders, including their placement and impact on element dimensions. Additionally, it includes examples demonstrating the use of these properties in HTML and CSS.

Uploaded by

Fiel Paulo Mamucod Fabian
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

CSS Outline

An outline is a line that is drawn around elements, OUTSIDE the borders, to make the element "stand out".

CSS has the following outline properties:

 outline-style
 outline-color
 outline-width
 outline-offset

Note: Outline differs from borders! Unlike 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.

CSS Outline Width

The outline-width property specifies the width of the outline, and can have one of the following values:

 thin (typically 1px)


 medium (typically 3px)
 thick (typically 5px)
 A specific size (in px, pt, cm, em, etc)

The following example shows some outlines with different widths:


Example
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 { border: 1px solid black; outline-style: solid;outline-color: red; outline-width: thin;}
p.ex2 {border: 1px solid black; outline-style: solid; outline-color: red;outline-width: medium;}
p.ex3 { border: 1px solid black;outline-style: solid; outline-color: red; outline-width: thick;}
p.ex4 { border: 1px solid black; outline-style: solid; outline-color: red;outline-width: 4px;}
</style>
</head>
<body>
<h2>The outline-width Property</h2>
<p class="ex1">A thin outline.</p>
<p class="ex2">A medium outline.</p>
<p class="ex3">A thick outline.</p>
<p class="ex4">A 4px thick outline.</p>
</body>
</html>
CSS Outline Color

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

The color can be set by:

 name - specify a color name, like "red"


 HEX - specify a hex value, like "#ff0000"
 RGB - specify a RGB value, like "rgb(255,0,0)"
 HSL - specify a HSL value, like "hsl(0, 100%, 50%)"
 invert - performs a color inversion (which ensures that the outline is visible, regardless of color background)

The following example shows some different outlines with different colors. Also notice that these elements also
have a thin black border inside the outline:
Example
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 { border: 2px solid black; outline-style: solid; outline-color: red;}
p.ex2 { border: 2px solid black; outline-style: dotted; outline-color: blue;}
p.ex3 { border: 2px solid black; outline-style: outset; outline-color: grey;}
</style>
</head>
<body>
<h2>The outline-color Property</h2>
<p>The outline-color property is used to set the color of the outline.</p>
<p class="ex1">A solid red outline.</p>
<p class="ex2">A dotted blue outline.</p>
<p class="ex3">An outset grey outline.</p>
</body>
</html>

CSS Outline - Shorthand property

The outline property is a shorthand property for setting the following individual outline properties:

 outline-width
 outline-style (required)
 outline-color
The outline property is specified as one, two, or three values from the list above. The order of the values does not
matter.

The following example shows some outlines specified with the shorthand outline property:
Example
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {outline: dashed;}
p.ex2 {outline: dotted red;}
p.ex3 {outline: 5px solid yellow;}
p.ex4 {outline: thick ridge pink;}
</style>
</head>
<body>
<h2>The outline Property</h2>
<p class="ex1">A dashed outline.</p>
<p class="ex2">A dotted red outline.</p>
<p class="ex3">A 5px solid yellow outline.</p>
<p class="ex4">A thick ridge pink outline.</p>
</body>
</html>

CSS Outline Offset

The outline-offset property adds space between an outline and the edge/border of an element. The space between
an element and its outline is transparent.

The following example specifies an outline 15px outside the border edge:
Example
<!DOCTYPE html>
<html>
<head>
<style>
p { margin: 30px; border: 1px solid black; outline: 1px solid red; outline-offset: 15px;}
</style>
</head>
<body>
<h2>The outline-offset Property</h2>
<p>This paragraph has an outline 15px outside the border edge.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
p { margin: 30px; background:yellow; border: 1px solid black; outline: 1px solid red; outline-offset: 15px;}
</style>
</head>
<body>
<h2>The outline-offset Property</h2>
<p>This paragraph has an outline of 15px outside the border edge.</p>
</body>
</html>

You might also like