Buzz
The CSS Outline property is used to format the outer borders, emphasizing elements. Refer to Mytour's CSS tutorial below for detailed insights into the CSS Outline property.
1. Understanding the Outline Property in CSS
1.1. The outline-style Property in CSS
1.2. The outline-color Property
1.3. The outline-width Property
1.4. The shorthand outline Property
1.5. The outline-offset Property
1.6. Various Outline Properties in CSS
1. Understanding the Outline Property in CSS
The Outline properties in CSS include:
- The outline-style property
- The outline-color property
- The outline-width property
- The outline-offset property
- The outline property
1.1 The outline-style Property in CSS
The outline-style property in CSS determines the style and shape of the outline. Its values can be:
dotted - the outline border is a series of dots.
dashed - the outline border is a series of dashes.
solid - the outline border is a continuous line.
groove - the outline border appears as a 3D groove.
ridge - defines an outline border with a ridge appearance.
inset - specifies the outline border for an inset shadow.
outset - specifies the outline border for an outset shadow.
none - indicates no outline border.
hidden - defines a hidden outline border.
Example:
The output result appears as follows:
1.2 The outline-color Property
The outline-color property is used to set the color for the outer border.
Color values are set by:
- Name: specifies the name of any color, such as red.
- Hex: specifies a hex value, such as #ff0000.
- RGB: specifies an RGB value, such as rgb(255,0,0).
- invert: creates inverted color.
Example 1:
The following example sets 4 different colors for 4 outlines:
The output result appears as follows:
Example 2:
The following example uses outline-color: invert to create an inverted color.
The output result appears as follows:
1.3 The outline-width Property
The outline-width property determines the width of the outline border. It includes the following values:
- thin (typically 1px)
- medium (typically 3px)
- thick (typically 5px)
- Specific size (in units px, pt, cm, em, ...)
Example:
The output result appears as follows:
1.4 Shorthand outline Property
The shorthand outline property sets all the following properties in one declaration:
- The outline-width property.
- The outline-style property (mandatory).
- The outline-color property.
Example:
The output result appears as follows:
1.5 The outline-offset Property
The outline-offset property determines the distance between the outline border and the area or border of the element.
Example:
The output result appears as follows:
1.6. Outline Properties in CSS
Below is a table listing the outline properties in CSS:
In the CSS lesson above, Mytour has just introduced you to the Outline properties in CSS. In the upcoming lessons, Mytour will further introduce you to the properties for customizing sizes in CSS.
