Outline property in CSS š
Thread š§µ
Outline property
ā¢ used to draw a line around the elements or outside of the borders of elements
ā¢ outline is not a part of elements dimensions
ā¢ there are four different categories for outline properties :
ā outline-style
ā” outline-width
ā¢ outline-color
ā£ outline-offset
Let's discuss each one by one š
ā outline-style
ā¢ outline-style property declared the style of the outline
ā¢ outline-style values :
auto, none, dotted, dashed, solid, double, groove, hidden, inset, ridge etc.
Example š
ā” outline-width
ā¢ outline-width property declared the thickness of the outline
ā¢ outline-width values :
thin, medium, thick and a specific size etc.
Example š
ā¢ outline-color
ā¢ outline-color property declared the color of the outline
ā¢ outline-color values :
name, hex, rgba, hsl etc.
Example š
ā£ outline-offset
ā¢ used to adds space between border or edge and outline of an elements
ā¢ space between an element and its outline is transparent
ā¢ negative value places the outline inside the element
Example š
Outline shorthand
ā¢ you can set only style(required), width and color
ā¢ unable to set outline-offset value
ā¢ syntax :
outline : width style color;
Example š
Difference between outline and border property š
ā¢ Outline elements are not part of dimensions. However, they are part of the border element.
ā¢ Outline has no effect on element Size. However, border affects the element Size.
ā¢ Outline cannot be rounded.
End thread š§µ
If this thread helpful for you then
1. Do Retweet the FIRST TWEET.
2. Follow me and turn on the notifications: @personalvipin
Thank you ā£ļø
Vipin
@SocialWithAI
HTML is š„ | CSS is ā£ļø Hi š I'm Vipin, I'm learning web2 and sharing my knowledge with you guys in easy ways.