Curriculum

CSS

CSS HOME

0/1

CSS INTRODUCTION

0/1

CSS Syntax

0/1

CSS Selectors

0/1

CSS How To

0/1

CSS Comments

0/1

CSS Colors

0/4

CSS Backgrounds

0/5

CSS Borders

0/6

CSS Margins

0/2

CSS Padding

0/1

CSS Height/Width

0/1

CSS Box Model

0/1

CSS Outline

0/5

CSS Text

0/6

CSS Fonts

0/8

CSS Icons

0/1

CSS Links

0/1

CSS Lists

0/1

CSS Tables

0/5

CSS Display

0/1

CSS Max-width

0/1

CSS Position

0/1

CSS Z-index

0/1

CSS Overflow

0/1

CSS Float

0/3

CSS inline-block

0/1

CSS Align

0/1

CSS Combinators

0/1

CSS Pseudo-classes

0/1

CSS Pseudo-elements

0/1

CSS Opacity

0/1

CSS Navigation Bar

0/3

CSS Dropdowns

0/1

CSS Image Gallery

0/1

CSS Image Sprites

0/1

CSS Attr Selectors

0/1

CSS Forms

0/1

CSS Counters

0/1

CSS Website Layout

0/1

CSS Units

0/1

CSS Specificity

0/1

CSS !important

0/1

CSS Math Functions

0/1

Text lesson

Outline

An outline denotes a line drawn exterior to the border of an element.

CSS Outline

An outline is a delineation encircling elements, positioned EXTERNALLY to their borders, aiming to enhance the element’s prominence.

The CSS specification includes the following outline attributes:

Outline style
Outline color
Outline width
Outline offset
Outline

Please note: Outlines and borders are distinct. Unlike borders, outlines are drawn beyond the element’s border and may overlap other content. Additionally, outlines do not contribute to the element’s dimensions; thus, the total width and height of the element remain unaffected by the outline’s width.

CSS Outline Style

The outline-style property determines the style of the outline and accepts the following values:

dotted: Indicates a dotted outline.
dashed: Specifies a dashed outline.
solid: Specifies a solid outline.
double: Indicates a double outline.
groove: Defines a 3D grooved outline.
ridge: Specifies a 3D ridged outline.
inset: Specifies a 3D inset outline.
outset: Specifies a 3D outset outline.
none: Indicates no outline.
hidden: Specifies a hidden outline.

Below is an example illustrating the various outline-style values:

Example

Illustration showcasing the diverse outline styles:

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

Result:

Please be aware that none of the other outline properties (which will be further elaborated on in subsequent chapters) will exert any influence unless the outline-style property is defined.