CSS Outline Property

-- Learning not just technology, but also dreams!

CSS Tutorial

CSS Tutorial CSS Introduction CSS Editor CSS Syntax CSS Id and Class Selectors CSS How To CSS Backgrounds CSS Text CSS Fonts CSS Links CSS Lists CSS Tables CSS Box Model CSS Borders CSS Outline Property CSS Margins CSS Padding CSS Grouping and Nesting CSS Dimensions CSS Display and Visibility CSS Positioning CSS Overflow CSS Float CSS Layout – Horizontal & Vertical Alignment CSS Combinators CSS Pseudo-classes CSS Pseudo-elements CSS Navigation Bar CSS Dropdowns CSS Tooltips CSS Image Gallery CSS Image Transparency/Opacity CSS Image Sprites CSS Media Types CSS Attribute Selectors CSS Forms CSS Counters CSS Website Layout CSS !important CSS Summary CSS Examples CSS Quiz

CSS3 Tutorial

CSS3 Tutorial CSS3 Introduction CSS3 Borders CSS3 Border Radius CSS3 Backgrounds CSS3 Gradients CSS3 Text Effects CSS3 Fonts CSS3 2D Transforms CSS3 3D Transforms CSS3 Transitions CSS3 Animations CSS3 Multiple Columns CSS3 User Interface CSS Images CSS Buttons CSS Pagination Examples CSS3 Box Sizing CSS3 Flexbox CSS3 Media Queries CSS3 Media Query Examples CSS3 Quiz

CSS Responsive Design

Viewport Grid View Media Queries Images Videos Frameworks

CSS Reference

CSS Reference CSS Selectors CSS Aural Reference CSS Web Safe Fonts CSS Animatable CSS Units CSS Colors CSS Color Values CSS Color Names CSS Hex Colors

CSS Borders

CSS Margins

Deep Dive

Programming

Programming Languages

Development Tools

Scripting Languages

Computer Science

Scripting

Software

Web Services

Web Design and Development

Network Services

CSS Outline

An outline is a line 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

CSS Outline Style

The outline-style property specifies the style of an outline.

An outline is a line that is drawn around elements (outside the borders) to make the element "stand out".

The outline-style property specifies the style of an outline.

The following values are allowed:

dotted - Defines a dotted outline
dashed - Defines a dashed outline
solid - Defines a solid outline
double - Defines a double outline
groove - Defines a 3D grooved outline
ridge - Defines a 3D ridged outline
inset - Defines a 3D inset outline
outset - Defines a 3D outset outline
none - Defines no outline
hidden - Defines a hidden outline

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 an RGB value, like "rgb(255,0,0)"
HSL - specify a HSL value, like "hsl(0, 100%, 50%)"
invert - performs a color inversion (ensures the outline is visible, regardless of color background)

CSS Outline Width

The outline-width property specifies the width of an outline.

The width can be set by:

A specific size (in px, pt, cm, em, etc)
Using one of the three pre-defined values: thin, medium, or thick

The following values are allowed:

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

CSS Outline Shorthand

The outline property is a shorthand property for setting one or more of the following individual outline properties:

outline-width
outline-style (required)
outline-color

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.

All CSS Outline Properties

Property	Description
outline	Sets all the outline properties in one declaration
outline-color	Sets the color of an outline
outline-offset	Specifies the space between an outline and the edge or border of an element
outline-style	Sets the style of an outline
outline-width	Sets the width of an outline

Test Yourself with Exercises!

iFlytek Spark Coding Plan includes free model invocation quota, one-stop experience and deployment platform for DeepSeek, GLM, Kimi, MiniMax. Configuration Guide ¥3.9/month Activate Now

1 Note Write Note

#0 sanshui

ymh***9@163.com

Reference Address 649 1.outline does not take up space, meaning it does not increase the extra width or height (this does not cause reflow or repaint when the browser renders)

2.outline may be non-rectangular (in Firefox browser)

sanshui

ymh***9@163.com

Reference Address 8 years ago (2018-08-07)

Click Me to Share Notes

Cancel

Write Note...

Image URL

Image Description

Image Size ×

Share Note

Nickname Nickname (Required)
Email Email (Required)
Reference URL Reference URL

Category Navigation

Python / Data Science

YouTip

Css Outline