| Previous | Home | Next |
The outline property sets the outline-color, outline-style, and outline-width around an element using the values specified.The outline property in CSS draws a line around the outside of an element.An outline is similar to a border in that a line is drawn around the element; unlike borders, outlines won’t allow us to set each edge to a different width, or set different colors and styles for each edge. An outline is the same on all sides.
various types of outline properties using CSS.
- The <outline-width> property is used to set the width of the outline.
- The <outline-style> property is used to set the line style for the outline.
- The <outline-color> property is used to set the color of the outline.
- The <outline> property is used to set all the above three properties in a single statement.
The outline-width Property
The outline-width property specifies the width of the outline to be added to the box. Its value should be a length or one of the values thin, medium, or thick . just like the border-width attribute
p {
outline-width:medium;
}
The outline-style Property
The outline-style property specifies the style for the line (solid, dotted, or dashed) that goes around an element. It can take one of the following values.
p {
outline-style:dotted;
}
The outline-color Property
The outline-color property allows you to specify the color of the outline. Its value should either be a color name, a hex color, or an RGB value, as with the color and border-color properties.
p{
outline-color:Red;
}
The outline Property
The outline property is a shorthand property that allows you to specify values for any of the three properties discussed previously in any order but in a single statement.
p{
outline:thin solid Red;
}
<html>
<head>
<style>
p.one {
outline-width:medium;
outline-style:dotted;
outline-color:blue;
}
p.two {
outline-width:thick;
outline-style:inset;
outline-color:#00CCCC;
}
p.three {
outline-width:thin;
outline-style:groove;
outline-color:#00FF00;
}
p.four {
outline-width:medium;
outline-style:solid;
outline-color:#996666;
}
</style>
</head>
<body>
<p class="one">It's show the outline property </p>
<p class="two">It's show the outline property </p>
<p class="three">It's show the outline property </p>
<p class="four">It's show the outline property </p>
</body>
</html>
Output
| Previous | Home | Next |