Outline property in CSS

Outline property in CSS is used to format the outer contours, highlighting the element. Refer to the following CSS lesson of Taimienphi.vn to learn in detail the Outline property in CSS.

1. Outline attribute in CSS

Outline properties in CSS include:

– Outline-style attribute
– Outline-color attribute
– Outline outline-width attribute
– Outline outline-offset attribute
– Outline attribute

1.1 The outline-style attribute in CSS

The outline-style attribute in CSS defines the style and shape of the outline. The values ​​of this attribute may be:

dotted – outline outline is dot.

dashed – outline outline is dashed.

solid – Outline outline is solid line.

double – Outline outline is 2 strokes.

groove – Outline outline is a 3D outline border.

ridge – define contour lines for the apex.

inset – define borders for inner shadow lines.

outset – Define borders for outer shadow lines.

none -no borders.

hidden – define hidden borders.

For example:

The output will look like the following:

1.2 The outline-color attribute

The outline-color attribute is used to set the color of the outer border.

Color values ​​are set by:

– Name: Specify a name of any color, such as red.

– Hex: Specify hex values, such as # ff0000.

– RBG: Specify RBG values, such as rgb (255,0,0).

– invert: Create reverse colors.

Example 1:

The following example sets up 4 different colors for the 4 contours:

The output will look like the following:

Example 2:

The following example uses outline-color: invert to create a reverse color.

The output will look like the following:

1.3 outline-width attribute

The outline-width attribute specifies the width of the contour. Attributes include values:

– thin (usually 1px)

– medium (usually 3px)

– thick (usually 5px)

– Specific dimensions (px, pt, cm, em, …)

For example:

The output will look like the following:

1.4 Outline outline attribute

The abbreviated outline attribute sets all of the following properties in one declaration:

– Outline outline-width attribute.

– Outline-style attribute (required).

– Outline-color attribute.

For example:

The output will look like the following:

1.5 outline-offset attribute

The outline-offset attribute determines the distance between the outline outline and the area or border of the element.

For example:

The output will look like the following:

1.6. Outline properties in CSS

Below is a list of Outline attributes in CSS:

https://thuthuat.taimienphi.vn/thuoc-tinh-outline-trong-css-50606n.aspx
The above CSS lesson Taimienphi.vn has just introduced you to Outline properties in CSS. In the next lessons, Taimienphi.vn will introduce you more customized properties Resize in CSS Please.