Outline property in CSS


Lesson below Taimienphi.vn will introduce you the Outline property in CSS. In addition, readers can refer to some other CSS lessons available on Taimienphi.vn to learn cursor properties 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.

Outline property in CSS

Table of Contents:
1. Outline attribute in CSS
1.1. The outline-style attribute in CSS
1.2. Attribute outline-color
1.3. Attribute outline-width
1.4. Attribute outline shortened
1.5. Attribute outline-offset
1.6. Outline properties 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:

Crystal outline in css

The output will look like the following:

Crystal outline in css 2

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:

Crystal outline in css 3

The output will look like the following:

Crystal outline in css 4

Example 2:

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

Crystal outline in css 5

The output will look like the following:

Crystal outline in css 6

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:

Crystal outline in css 7

Crystal outline in css 8

The output will look like the following:

Crystal outline in css 9

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:

Crystal outline in css 10

The output will look like the following:

Crystal outline in CSS 11

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:

Crystal outline in css 12

The output will look like the following:

Crystal outline in css 13

1.6. Outline properties in CSS

Below is a list of Outline attributes in CSS:

Crystal outline in css 14

Crystal outline in css 15

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.

.

Add a Comment

Your email address will not be published. Required fields are marked *