Languages
[Edit]
EN

CSS - outline property example

0 points
Created by:
Sujay
512

In this article, we would like to show you how to use outline property in CSS.

Quick overview:

 

1. Outline style property

Edit

This section shows how to change the outline style.

There are two ways to set outline style:

  • with outline-style property what was described in this section,
  • with outline property: outline: width style color; what was presented in examples at begining of this article,
    e.g. outline: 1px solid red;

There are available different values for outline style.

outline-styledescription
dotteddotted outline
dasheddashed outline
solidsolid outline
doubledouble outline
groove3D grooved outline (effect depends on the outline-color value)
ridge3D ridged outline (effect depends on the outline-color value)
inset3D inset outline (effect depends on the outline-color value)
outset3D outset outline (effect depends on the outline-color value)
noneno outline
hiddenhidden outline
CSS - outline-style example
CSS - outline-style example

Run the below example to see how outline-style property works.

2. Outline width property

Edit

This section shows how to change outline width.

There are two ways to set outline width:

  • with outline-width property what was described in this section,
  • with outline property: outline: width style color; what was presented in examples at beginning of this article,
    e.g. outline: 1px solid red;

Note: outline width property works with different kind of units: absolute and relative. Read this article to know about kind od units that can be used with styles.

CSS - outline-width property example
CSS - outline-width property example

Run the below example to see how outline-width property works.

3. Outline color property

Edit

This section shows how to change the outline color.

There are two ways to set outline color:

  • with outline-color property what was described in this section,
  • with outline property: outline: width style color; what was presented in examples at beginning of this article,
    e.g. outline: 1px solid red;

Note: outline color value can be written in few ways. Read this article to know how to write color in diferent way in CSS.

CSS - outline-color property example
CSS - outline-color property example

Run the below example to see how outline-color property works.

 

See also

Edit
  1. CSS - border property example

References

Edit
  1. outline - CSS: Cascading Style Sheets | MDN
1
Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join