CSS Outline CSS
- CSS Introduction
- CSS Selectors
- How To Add CSS
- CSS Colors
- CSS Backgrounds
- CSS Borders
- CSS Margins
- CSS Padding
- CSS Height and Width
- CSS Outline
- CSS Text
- CSS Fonts
- CSS Links
- CSS Lists
- CSS Tables
- CSS Layout - The display Property
- CSS Layout - CSS position
- CSS Layout - display: inline-block
- CSS Layout - Horizontal & Vertical Align
- CSS Combinators
- CSS Opacity / Transparency
- CSS Dropdowns
- Image Gallery
- CSS Attribute Selectors
- CSS Counters
- CSS Media Queries
CSS Outline
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
outline
Note: Outline differs from borders! Unlike the 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 are not affected by the width of the outline.
CSS Outline Style
The outline-style
property specifies the style of the outline, and can have one of the following values:
dotted
- Defines a dotted outlinedashed
- Defines a dashed outlinesolid
- Defines a solid outlinedouble
- Defines a double outlinegroove
- Defines a 3D grooved outlineridge
- Defines a 3D ridged outlineinset
- Defines a 3D inset outlineoutset
- Defines a 3D outset outlinenone
- Defines no outlinehidden
- Defines a hidden outline
Example
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;}
Note: None of the other outline properties will have any effect, unless the outline-style
property is set!