Curriculum
Course: CSS
Login

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 Offset

 

CSS Outline Offset

The outline-offset property introduces a gap between the outline and the edge or border of an element. This space between the element and its outline remains transparent.

In the following example, an outline is defined to extend 15 pixels beyond the border edge.

Image

Example

p {
  margin: 30px;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}

The subsequent example demonstrates that the area between an element and its outline remains transparent.Image

Example

p {
  margin: 30px;
  background: yellow;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}

All CSS Outline Properties

Property

Description

outline

A single declaration shorthand for specifying outline-width, outline-style, and outline-color.

outline-color

Specifies the color of an outline.

outline-offset

Specifies the distance between an outline and the edge or border of an element.

outline-style

Specifies the style of an outline.

outline-width

Specifies the width of an outline

 

Previous
Next