The CSS `outline` property is used to draw a line around an element, outside the border, to make the element stand out. The outline differs from the border in the following ways:
1. Position: The outline is drawn outside the element's border edge.
2. Non-influence on Layout: Unlike borders, outlines do not occupy space or affect the element's layout.
3. Customization: The outline can be customized using properties like color, style, and width.
Syntax
The shorthand syntax for the `outline` property is:
outline: [outline-width] [outline-style] [outline-color];
Properties
1. outline-width: Specifies the width of the outline. Possible values:
- `thin`
- `medium`
- `thick`
- Specific measurements like `px`, `em`, `rem`, etc. (e.g., `2px`, `0.1em`)
2. outline-style: Specifies the style of the outline. Possible values:
- `none`
- `solid`
- `dotted`
- `dashed`
- `double`
- `groove`
- `ridge`
- `inset`
- `outset`
3. outline-color: Specifies the color of the outline. Possible values:
- Color names (e.g., `red`, `blue`)
- Hex values (e.g., `#000000`)
- RGB values (e.g., `rgb(0,0,0)`)
- RGBA values (e.g., `rgba(0,0,0,0.5)`)
Example
/* Shorthand property */
div {
outline: 2px solid red;
}
/* Individual properties */
div {
outline-width: 2px;
outline-style: solid;
outline-color: red;
}
Accessibility
Outlines are commonly used to improve accessibility, especially for keyboard navigation. For example, focus outlines are often used to highlight links or form fields when they are focused.
a:focus {
outline: 2px solid blue;
}
This ensures that users who navigate using a keyboard can easily see which element is currently focused.
In summary, the `outline` property in CSS is a versatile tool for drawing attention to elements without affecting the document's layout, providing both aesthetic and functional benefits.
In CSS, both `outline` and `border` properties are used to draw lines around an element, but they have distinct differences in terms of their behavior, positioning, and influence on the layout. Here are the key differences:
Outline
1. Position:
The `outline` is drawn outside the border edge of the element, not taking up any space within the element's box model.
2. Layout Influence:
- The `outline` does not affect the layout of the element or any surrounding elements. It does not contribute to the element's width or height.
3. Customization:
- The `outline` can be customized with the `outline-color`, `outline-style`, and `outline-width` properties.
- There is no shorthand property for setting individual sides of an outline; it applies uniformly around the entire element.
4. Use Cases:
- Outlines are often used for highlighting elements, such as indicating focus for accessibility purposes (e.g., when a user tabs through a form).
Border
1. Position:
The `border` is drawn between the element's padding and margin, forming part of the element's box model.
2. Layout Influence:
The `border` affects the layout of the element. It adds to the element's width and height, potentially affecting the positioning of surrounding elements.
3. Customization:
The `border` can be customized for individual sides using properties like `border-top`, `border-right`, `border-bottom`, and `border-left`.
The `border` property can be set using the shorthand `border: [width] [style] [color];`.
4. Use Cases:
- Borders are typically used for styling the element, such as creating a visual separation between different sections of a webpage or defining the boundaries of a box.
Example
Here's a practical example to illustrate the differences:
<!DOCTYPE html>
<html>
<head>
<style>
.with-border {
border: 2px solid blue;
padding: 10px;
margin: 20px;
}
.with-outline {
outline: 2px solid red;
padding: 10px;
margin: 20px;
}
</style>
</head>
<body>
<div class="with-border">This is a div with a border.</div>
<div class="with-outline">This is a div with an outline.</div>
</body>
</html>
In this example:
The `with-border` div will have a blue border that adds to the element's dimensions, affecting its width and height.
The `with-outline` div will have a red outline that does not add to the element's dimensions or affect its layout.
Visual Representation
Here's a visual comparison:
Border: Sits within the element's box model, between the padding and margin.
[margin]
[border]
[padding]
[content]
Outline: Sits outside the element's border, not affecting the layout.
[margin]
[border]
[padding]
[content]
[outline]
Summary
Outline: Outside the element, doesn't affect layout, used for highlighting.
Border: Inside the element's box model, affects layout, used for styling and defining boundaries.