CSS
  1. CSS intro
  2. CSS stylesheets
  3. CSS syntax
  4. CSS Classes & ID's
  5. CSS comments
  6. CSS BG properties
  7. CSS text properties
  8. CSS font properties
  9. CSS list properties
  10. CSS border properties
  11. CSS margin properties
  12. CSS padding properties
  13. CSS outline properties
  14. CSS table properties
  15. CSS dim properties
  16. CSS class properties
  17. CSS position properties
  18. CSS pseudo classes
  19. CSS pseudo elements
  20. CSS shortcuts
  21. CSS media types
  22. CSS summary

CSS outline properties

With CSS outline properties, you can specify how lines appear around elements outside of a borders edge. All of the examples on this page have a red border and an outline outside of the borders edge to illustrate how an outline is displayed relative to a border.

This tutorial focuses on:

Setting the style of an outline

The style of an outline is set with the outline-style property.

Possible values for the outline-style property: dashed, dotted, solid, groove, double, outset

Example:
<html> <head> <title>Lists</title> <style type="text/css"> h1, h2, p, a {border: solid 1px red;} h1 {outline-style: dashed;} h2 {outline-style: double;} p {outline-style: dotted;} a {outline-style: groove;} </style> </head> <body> <h1>This text has a dashed outline</h1> <h2>This text has a double outline</h2> <p>This text has a dotted outline</p> <a href="http://www.yahoo.com">This text has a groove outline</a> </body> </html>
Output:

This text has a dashed outline

This text has a double outline

This text has a dotted outline

This text has a groove outline

Setting the width of an outline

The width of an outline is set with the outline-width property. The values you can assign to this property include "thin", "medium", "thick", or a custom value.

Example:
<html> <head> <title>Lists</title> <style type="text/css"> h1, h2, p, a {border: solid 1px red;} h1 {outline-style: dashed; outline-width: thin;} h2 {outline-style: double; outline-width: medium;} p {outline-style: dotted; outline-width: thick;} a {outline-style: groove; outline-width: 10px;} </style> </head> <body> <h1>This text has a dashed outline</h1> <h2>This text has a double outline</h2> <p>This text has a dotted outline</p> <a href="http://www.yahoo.com">This text has a groove outline that has a thickness of 10 pixels</a> </body> </html>
Output:

This text has a thin dashed outline

This text has a medium double outline

This text has a thick dotted outline

This text has a groove outline that has a thickness of 10 pixels

Setting the color of an outline

The color of an outline is set with the outline-color property. The values you can assign to this property include a color name, an RGB value, or a hexadecimal value.

Example:
<html> <head> <title>Lists</title> <style type="text/css"> h1, h2, p, a {border: solid 1px red;} h1 {outline-style: dashed; outline-color: green;} h2 {outline-style: double; outline-color: #556b2f;} p {outline-style: dotted; outline-width: rgb(128, 128, 128);} a {outline-style: groove; outline-color: #2f7e87;} </style> </head> <body> <h1>This text has a green dashed outline</h1> <h2>This text has a darkolivegreen double outline</h2> <p>This text has a gray dotted outline</p> <a href="http://www.yahoo.com">This text has a teal groove outline</a> </body> </html>
Output:

This text has a green dashed outline

This text has a darkolivegreen double outline

This text has a gray dotted outline

This text has a teal groove outline
© Copyright 2013-2014 Landofcode.com
Terms of use | Privacy policy | Copyright information