Hello guys! welcome to this wonderful section of my tutorial on CSS. In this tutorial i want to talk about CSS Outline.
Outlines are very similar to borders, but there are few major differences as well, which are listed out below:
You can set the following outline properties using CSS.
Outlines are very similar to borders, but there are few major differences as well, which are listed out below:
- An outline does not take up space.
- Outlines do not have to be rectangular.
- Outline is always the same on all sides; you cannot specify different values for different sides of an element.
You can set the following 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 that we discussed in Css border tutorial.
A width of zero pixels means no outline.
Below is a short example:
This text is having a thin outline.
This text is having a thick outline.
This text is having a 4px outline.
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:
This text is having a thin and solid outline.
This text is having a thick and dashed outline.
This text is having a 4px and dotted outline.
You can also read: Html Attributes 2
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 property.
Below is a short example:
This text is having a thin, solid and red outline.
This text is having a thick, dashed and green outline.
This text is having a 4px, dotted and blue outline.
The Outline Property
The outline property is a shorthand property that allows you to specify values for any of the three properties discussed above in a single statement.
Below is a short example:
This text is having a thin, solid and red outline.
This text is having a thick, dashed and green outline.
This text is having a 4px, dotted and blue outline.
Alright guys, we have come to the end of this tutorial on CSS outline. Feel free to ask your questions in any area you don't understand properly.
Like our facebook page and subscribe with us to get our tutorial posts delivered directly to your emails. Also share this tutorial post on the various social media platforms available.
You can follow us on twitter
You can follow us on google+
You can also follow us on pinterest
Links to previous tutorials on CSS : Css Introduction (Css tutorial) , Syntax (Css tutorial) , Inclusion (Css tutorial) , Css Measurement Units (Css tutorial) , Backgrounds (Css tutorial) , Fonts (Css tutorial) , Text (Css tutorial) , Images (Css tutorial) , Links (Css tutorial) , Css table (Css tutorial) , Css border (Css tutorial) , Css margin (Css tutorial) , Css List (Css tutorial) , Css padding (Css tutorial) , Css cursor
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 that we discussed in Css border tutorial.
A width of zero pixels means no outline.
Below is a short example:
This text is having a thin outline.
This text is having a thick outline.
This text is having a 4px outline.
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:
- none: No border. (Equivalent of outline-width:0;)
- solid: Outline is a single solid line.
- dotted: Outline is a series of dots.
- dashed: Outine is a series of short lines.
- double: Outline is two solid lines.
- groove: Outline looks as though it is carved into the page.
- ridge: Outline looks the opposite of groove.
- inset: Outline makes the box look like it is embedded in the page.
- outset: Outline makes the box look like it is coming out of the canvas.
- hidden: Same as none.
This text is having a thin and solid outline.
This text is having a thick and dashed outline.
This text is having a 4px and dotted outline.
You can also read: Html Attributes 2
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 property.
Below is a short example:
outline-color:red;">
This text is having a thin, solid and red outline.
outline-color:#009900;">
This text is having a thick, dashed and green outline.
outline-color:rgb(13,33,232);">
This text is having a 4px, dotted and blue outline.
The Outline Property
The outline property is a shorthand property that allows you to specify values for any of the three properties discussed above in a single statement.
Below is a short example:
This text is having a thin, solid and red outline.
This text is having a thick, dashed and green outline.
This text is having a 4px, dotted and blue outline.
Alright guys, we have come to the end of this tutorial on CSS outline. Feel free to ask your questions in any area you don't understand properly.
Like our facebook page and subscribe with us to get our tutorial posts delivered directly to your emails. Also share this tutorial post on the various social media platforms available.
You can follow us on twitter
You can follow us on google+
You can also follow us on pinterest
Links to previous tutorials on CSS : Css Introduction (Css tutorial) , Syntax (Css tutorial) , Inclusion (Css tutorial) , Css Measurement Units (Css tutorial) , Backgrounds (Css tutorial) , Fonts (Css tutorial) , Text (Css tutorial) , Images (Css tutorial) , Links (Css tutorial) , Css table (Css tutorial) , Css border (Css tutorial) , Css margin (Css tutorial) , Css List (Css tutorial) , Css padding (Css tutorial) , Css cursor
