Loading Please Wait...
CSS outline property is used to set outline around the element, outside the border.
Outline looks very similar to border but differ in many ways. Unlike borders, outlines are drawn outside the border, cause overlapping with other elements and outline is not the part of the dimension of the element. It means total width and height is not affected by outline.
outline: 10px;
outline: 10px solid;
outline: 10px solid red;
CSS outline-width sets the width of the outline.
/* Keyword values */
outline-width: thin;
outline-width: medium;
outline-width: thick;
/* length values */
outline-width: 1px;
outline-width: 0.1em;
/* Global values */
outline-width: inherit;
outline-width: initial;
outline-width: revert;
outline-width: revert-layer;
outline-width: unset;
CSS outline-color sets the color of the outline.
/* color values */
outline-color: #f92525;
outline-color: rgb(30, 222, 121);
outline-color: blue;
/* Keyword value */
outline-color: invert;
/* Global values */
outline-color: inherit;
outline-color: initial;
outline-color: revert;
outline-color: revert-layer;
outline-color: unset;
CSS outline-style sets the style of the outline.
/* Keyword values */
outline-style: auto;
outline-style: none;
outline-style: dotted;
outline-style: dashed;
outline-style: solid;
outline-style: double;
outline-style: groove;
outline-style: ridge;
outline-style: inset;
outline-style: outset;
/* Global values */
outline-style: inherit;
outline-style: initial;
outline-style: revert;
outline-style: revert-layer;
outline-style: unset;
CSS outline-offset sets the space between outline and border of the element.
/* length values */
outline-offset: 3px;
outline-offset: 0.2em;
/* Global values */
outline-offset: inherit;
outline-offset: initial;
outline-offset: revert;
outline-offset: revert-layer;
outline-offset: unset;
CSS outline is a shorthand property to set outline width, style and color.
/* style */
outline: solid;
/* color | style */
outline: #f66 dashed;
/* style | width */
outline: inset thick;
/* color | style | width */
outline: green solid 3px;
/* Global values */
outline: inherit;
outline: initial;
outline: revert;
outline: revert-layer;
outline: unset;
How you feel about this blog:
Share this blog on:
If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com
Contact Us
We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..
Copyright © , Lynxsia IT Solutions, All rights reserved