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.
No comments:
Post a Comment