Loading

Outline

  • In CSS, the outline property is used to create a visible border around an element, but it is different from the standard border.

Property in several ways:

Outline does not affect an element's layout:

  • outline property does not take up any space around the element.
  • It is drawn outside the border, so it won't push other elements away or change the element's size

Outlines are non-rectangular: 

  • By default, outlines follow the shape of the element, including rounded corners. 

Syntax:

selector {
outline: [outline-width] [outline-style] [outline-color];
}

outline-width: It indicates the outline, which can be specified in pixels, ems, rems, or other length units. It can also be set to thin, medium, thick, or auto.

outline-style: This indicates the style of the outline, similar to border styles. It can be dotted, dashed, solid, double, and other values.

outline-color: This sets the color of the outline. It can be specified as a named color, hexadecimal value, RGB, or HSL value.


Difference Between Border and Outline

 

FEATURESBORDEROUTLINE
DefinitionDefines the width, style, and color of the border around an element.Draws a line around an element, outside the border edge.
Affects LayoutYes, it takes up space and affects the element's layout.No, it does not take up space or affect the layout.
PositionPositioned within the element's box model.Positioned outside the element's border.
Individual Side ControlYes, can control each side separately (e.g., border-top).No, applies to all sides equally.
Offset PropertyNoYes, outline-offset to control distance from the border.
Propertiesborder-width, border-style, border-color, border-radius, border-top, border-right, border-bottom, border-leftoutline-width, outline-style, outline-color, outline-offset
Shorthand Propertyborderoutline

Example:

<!DOCTYPE html>
<html>
<style type="text/css">
    .box {
        background-color: #eee;
        border: 3px solid Lightgreen;
        padding: 5px 10px;
        outline-width: 3px;
        outline-style: solid;
        outline-color: red;
    }
</style>
<body>
<div class="box">Welcome to Quipo</div>
</body>

</html> 

Output: