CSS Outline Properties

## CSS Basic

CSS HOME CSS Introduction CSS Syntax CSS Id & Class CSS How To CSS Backgrounds CSS Text CSS Fonts CSS Links CSS Lists CSS Tables

## CSS Box Model

CSS Box Model CSS Border CSS Outline CSS Margin CSS Padding

## CSS Advanced

CSS Grouping/Nesting CSS Dimension CSS Display CSS Positioning CSS Floating CSS Align CSS Pseudo-class CSS Pseudo-element CSS Navigation Bar CSS Image Gallery CSS Image Opacity CSS Image Sprites CSS Media Types CSS Attr Selectors

## CSS3 Tutorial

CSS3 Introduction CSS3 Borders 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 Summary

## CSS Examples

CSS Examples CSS Quiz CSS Certificate

## CSS References

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

# CSS Outlines

« Previous
Next Chapter »

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

The outline properties specify the style, color, and width of an outline.

## Examples

Draw a line around an element (outline)
This example demonstrates how to draw a line around an element, outside the border edge.

Set the style of an outline
This example demonstrates how to set the style of an outline.

Set the color of an outline
This example demonstrates how to set the color of an outline.

Set the width of an outline
This example demonstrates how to set the width of an outline.

## CSS Outline

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

However, the outline property is different from the border property.

The outline is not a part of an element's dimensions; the element's total width and height is not affected by the width of the outline.

## All CSS Outline Properties

Property | Description | Values
--- | --- | ---
outline | Sets all the outline properties in one declaration | outline-color outline-style outline-width inherit
outline-color | Sets the color of an outline | color_name hex_number rgb_number invert inherit

outline-style

Sets the style of an outline

none
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit

outline-width | Sets the width of an outline | thin medium thick length inherit

« Previous
Next Chapter »

## Your suggestion:

Your E-mail (optional):

Page address:

Description:

Close [X]

## Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

## WEB HOSTING

Best Web Hosting UK Reseller Hosting Wow! $5 SSD Hosting

## WEB BUILDING

Download XML Editor
FREE Website BUILDER FREE Website Creator

## WEB RESOURCES

Web Statistics Web Validation

## SHARE THIS PAGE