CSS Outline Property
- Introduction to CSS outline property
- The syntax of CSS outline property
- Example of CSS outline property
- Other outline properties
Introduction to CSS outline property
CSS provides an outline property to design or draw an outside line for HTML elements. By this property, you can define the color, style, and size of the outline. Before knowing more about this property, let us know what is the CSS outline Property?
The outline is an outside line of an element which is outside the border. The border of an element is part of the same element. But the CSS outline is not part of the element. If you want to set the background of an element, then you will see a background color within its border. This color is not filled outside the border because the outline is not part of an element.
The main difference between the border and the outline is that if you can define one of the sides of the border but the outline is always defined for all sides.
Apart from this, the position effect of the surrounding elements is not done by the outline. Because when the outline is increased more than the default value, it overlaps the surrounding elements. But increasing the borders, the position of the elements is changed.
The outline can be used in many ways. For example, the CSS outline property is used to design link tabs. As soon as a user hovers over the tab, the outlines are shown. Apart from this, it can also be used to make an attractive layout design with border.
As I mentioned earlier, you can use the outline property to design the outside line. There is a shorthand property to design outline because it can be set to all values at once.
The syntax of CSS outline Property
The general syntax of the CSS outline property has been given below.
outline: color style width;
As you can see in the above syntax, three values of outline property are defined. These values have been described below.
- color – Firstly, the color of the outline is defined. To define the color, you can either type the name directly or you can also write the hex code.
- width – This is the third value which is used to define the width of the outline. This width can be defined in pixels.
- style - The other value is style. You can define the values as below.
- none - this is the default value. It does not create a line.
- hidden - This value is used to create a line but it is hidden.
- dotted - This value creates a dotted line.
- dashed - The Dashed line is created with this value.
- solid - A solid line is created from this value.
- double - This value creates a double line.
- groove - This value creates a grooved line.
- ridge - This value creates a ridged line.
- inset - This value creates an inset line.
- outset - This value is used to create the outset line.
Example of CSS outline Property
The CSS outline property has been explained by the below example.
<!DOCTYPE html>
<html>
<head>
<title> CSS Outline Property Example </title>
<style>
.Dotted {
background: pink;
border: 5px solid yellow;
outline: blue dotted 10px;
width: 30%;
margin: 30px;
}
.Solid {
background: pink;
border: 5px solid yellow;
outline: red solid 10px;
width: 30%;
margin: 30px;
}
.Double {
background: pink;
border: 5px solid yellow;
outline: green double 10px;
width: 30%;
margin: 30px;
}
.Groove {
background: pink;
border: 5px solid yellow;
outline: brown groove 10px;
width: 30%;
margin: 30px;
}
.Ridge {
background: pink;
border: 5px solid yellow;
outline: gold ridge 10px;
width: 30%;
margin: 30px;
}
.Inset {
background: pink;
border: 5px solid yellow;
outline: orange inset 10px;
width: 30%;
margin: 30px;
}
.Outset {
background: pink;
border: 5px solid yellow;
outline: gray outset 10px;
width: 30%;
margin: 30px;
}
</style>
</head>
<body>
<p class="Dotted"> This is a paragraph1 with background pink and broder yellow. Outline of this paragraph is blue and dotted with 10px. </p>
<p class="Solid"> This is a paragraph1 with background pink and broder yellow. Outline of this paragraph is red and solid with 10px. </p>
<p class="Double"> This is paragraph1 with background pink and broder yellow. Outline of this paragraph is green and double with 10px. </p>
<p class="Groove">This is a paragraph1 with background pink and broder yellow. Outline of this paragraph is brown and groove with 10px. </p>
<p class="Ridge"> This is a paragraph1 with background pink and broder yellow. Outline of this paragraph is gold and ridge with 10px. </p>
<p class="Inset"> This is a paragraph1 with background pink and broder yellow. Outline of this paragraph is orange and inset with 10px. </p>
<p class="Outset"> This is a paragraph1 with background pink and broder yellow. Outline of this paragraph is gray and outset with 10px. </p>
<style>
.Dotted {
background: pink;
border: 5px solid yellow;
outline: blue dotted 10px;
width: 30%;
margin: 30px;
}
.Solid {
background: pink;
border: 5px solid yellow;
outline: red solid 10px;
width: 30%;
margin: 30px;
}
.Double {
background: pink;
border: 5px solid yellow;
outline: green double 10px;
width: 30%;
margin: 30px;
}
.Groove {
background: pink;
border: 5px solid yellow;
outline: brown groove 10px;
width: 30%;
margin: 30px;
}
.Ridge {
background: pink;
border: 5px solid yellow;
outline: gold ridge 10px;
width: 30%;
margin: 30px;
}
.Inset {
background: pink;
border: 5px solid yellow;
outline: orange inset 10px;
width: 30%;
margin: 30px;
}
.Outset {
background: pink;
border: 5px solid yellow;
outline: gray outset 10px;
width: 30%;
margin: 30px;
}
</style>
</head>
<body>
<p class="Dotted"> This is a paragraph1 with background pink and broder yellow. Outline of this paragraph is blue and dotted with 10px. </p>
<p class="Solid"> This is a paragraph1 with background pink and broder yellow. Outline of this paragraph is red and solid with 10px. </p>
<p class="Double"> This is paragraph1 with background pink and broder yellow. Outline of this paragraph is green and double with 10px. </p>
<p class="Groove">This is a paragraph1 with background pink and broder yellow. Outline of this paragraph is brown and groove with 10px. </p>
<p class="Ridge"> This is a paragraph1 with background pink and broder yellow. Outline of this paragraph is gold and ridge with 10px. </p>
<p class="Inset"> This is a paragraph1 with background pink and broder yellow. Outline of this paragraph is orange and inset with 10px. </p>
<p class="Outset"> This is a paragraph1 with background pink and broder yellow. Outline of this paragraph is gray and outset with 10px. </p>
</body>
</html>
The above example will produce the below output.
Other Outline Properties
There are more outline properties available in CSS. From these properties, you can define every value of the outline separately. These properties have been described below.
- outline-color: This property allows you to simply specify the color of the outline.
- outline-style: By this property, you can define the style of the outline.
- outline-width: By this property, you can define the width of the outline.
These properties are useful in many situations. For example, if the same outline rule has been defined for all the elements and you want to define a different outline color for a particular element, then in that situation you can use the outline-color property with the style attribute inside that element.
0 Comments:
Post a Comment
Thank you for reading this post. Please do not enter any spam link in the comment box.