Tuesday, 17 December 2013

CSS » Outline


Now in this chapter we will explain You how to use outline.
An outline is a line that is drawn around elements (outside the borders) to make the element "stand out". It's different from the border property.















There is 4 CSS Outline Properties:
  • outline-style
  • outline-color
  • outline-width
  • outline

Now we will show You how to use this properties.


Creating outline

When You create outline You have to use outline-style property.
Like in CSS borders You can define same values like border ones:
  • none
  • solid
  • dotted
  • dashed
  • double
  • groove
  • ridge
  • inset
  • outset
  • inherit

» EXAMPLE:

<html>
<head>
<style>
#demo {
outline-style: dotted;
border: 1px solid red;
}
</style>
</head>
<body>
<p id="demo">Outline example.</p>
</body>
</html>


» Result:


Outline example.





Setting outline color

In this example we will use outline-color property.

» EXAMPLE:


<html>

<head>
<style>
#demo {
border: 1px solid red;
outline-style: dotted;
outline-color: blue;
}
</style>
</head>
<body>
<p id="demo">Outline example.</p>
</body>
</html>


» Result:




Outline example.





Setting outline width

If You want to set outline width You have to use outline-width property.
You can add

» EXAMPLE:


<html>

<head>
<style>
#demo {
border: 1px solid red;
outline-style: dotted;
outline-width: thick;
outline-color: blue;
}
#demo2 {
border: 1px solid red;
outline-style: dotted;
outline-width: 8px;
outline-color: blue;
}
</style>
</head>
<body>
<p id="demo">Outline example.</p>
<br />
<p id="demo2">Outline example 2.</p>
</body>
</html>


» Result:



Outline example.



Outline example 2.