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
FEATURES | BORDER | OUTLINE |
---|---|---|
Definition | Defines the width, style, and color of the border around an element. | Draws a line around an element, outside the border edge. |
Affects Layout | Yes, it takes up space and affects the element's layout. | No, it does not take up space or affect the layout. |
Position | Positioned within the element's box model. | Positioned outside the element's border. |
Individual Side Control | Yes, can control each side separately (e.g., border-top ). | No, applies to all sides equally. |
Offset Property | No | Yes, outline-offset to control distance from the border. |
Properties | border-width , border-style , border-color , border-radius , border-top , border-right , border-bottom , border-left | outline-width , outline-style , outline-color , outline-offset |
Shorthand Property | border | outline |
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: