CSS Outline Properties

An outline is used to drow a line around elements. CSS outside is just look like CSS border.

Outline Properties

There are some Outline properties used in CSS, listed below:

  • outline: A shorthand property for setting outline-width, outline-style, and outline-color in one declaration.
  • outline-style: Specifies the style of an outline.
  • outline-color: Specifies the color of an outline.
  • outline-width: Specifies the outline width.
  • outline-offset: Specifies the space between an outline and the edge or border of an element.

CSS Outline: Example

Output

Hello! This is Text Paragraph with CSS outline property.


Difference Between Outline & Border

  • The outline is drawn a line of outside the element's border, and may overlap other content.
  • The outline is NOT a part of the element's dimensions BUT the border is a part of element's dimension.
  • The element's total width and height is not affected by the width of the outline.

1. CSS Outline Style

  • dotted
  • dashed
  • solid
  • groove: Defines a 3D grooved outline
  • ridge: Defines a 3D ridged outline
  • inset: Defines a 3D insetd outline
  • outset: Defines a 3D outset outline
  • double
  • none
  • hidden

Example: Outline Style

Output

This is Text Paragraph and style with dotted outline.


This is Text Paragraph and style with dashed outline.


This is Text Paragraph and style with solid outline.


This is Text Paragraph and style with double outline.


This is Text Paragraph and style with groove outline.


This is Text Paragraph and style with ridge outline.


This is Text Paragraph and style with inset outline.


This is Text Paragraph and style with outset outline.


2. CSS Outline Color

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

Outline Color Set Like

  • name: like "red", "green", "blue", etc.
  • RGB: RGB value like "rgb(255,0,0)", "rgb(0,0,0)", etc.
  • Hex: Hex value like "#fffff", "#ff0000", "#000000", etc.
  • invert: color invert use to ensure that the outline is visible.

Example: Outline Color

Output

This is Text Paragraph of outline with name of color.


This is Text Paragraph of outline with invert.


3. CSS Outline Width

The CSS outline-width property is used to set the width of the outline.

Types of Width Thickness

  • Thin: Like (1px)
  • Medium: Like (3px)
  • Thick: Like (5px)
  • Specific Size: Like (in px, pt, cm, em, etc.)

Example: Outline Width

Output

The outline width Thin


The outline width Thick


4. CSS Outline Offset

The outline-offset is used to adds space between an outline and the edge/border of an element.

Example: Outline Offset

Output

Hello! This is a Paragraph outline offset.

Policy

GDATAMART.COM is optimized for learning & job information; The users try to improve your knowledge and practical experience through this site but we cannot warrant full correctness of all content... Learn More → | Sitemap →

© 2020 GDATAMART | All Rights Reserved