CSS Tutorials

adplus-dvertising
Outlines In CSS
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;
}
Simple Example
<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