The aesthetic application of CSS on table borders

How to use CSS to beautify the border of a table.

CSS syntax for table borders

The contents include the top border width, the right border width, the bottom frame width, the left border width, the border width, the borders color, the border style, the top border, the bottom box, the left border, the right border, borders, width, height, labels, and so on.

1. Top Border Width

Syntax: Border-top-width: < value >

Allowable Value: Thin | Medium | Thick | < length >

Initial value: Medium

Apply to: All objects

Backward compatible: No

The top box Width property is used to specify the width of the top border of an element. The value can be one of three keywords, not affected by the font size or length, and can be used to achieve proportional widths. Negative values are not allowed. You can also use the properties of the top border, the width of the borders, or the border to write slightly.

2. Right Border width

Syntax: Border-right-width: < value >

Allowable Value: Thin | Medium | Thick | < length >

Initial value: Medium

Apply to: All objects

Backward compatible: No

The right border Width property is used to specify the width of the right border of the element. The value can be one of three keywords, not affected by the font size or length, and can be used to achieve proportional widths. Negative values are not allowed. You can also use the properties of the right border, the width of the borders, or the border to write slightly.

3. Bottom Border Width

Syntax: Border-bottom-width: < value >

Allowable Value: Thin | Medium | Thick | < length >

Initial value: Medium

Apply to: All objects

Backward compatible: No

The bottom border Width property is used to specify the width of the bottom border of the element. The value can be one of three keywords, not affected by the font size or length, and can be used to achieve proportional widths. Negative values are not allowed. You can also use the properties of the bottom border, the width of borders, or the border to write slightly.

4. Left Border width
Syntax: Border-left-width: < value >

Allowable Value: Thin | Medium | Thick | < length >

Initial value: Medium

Apply to: All objects

Backward compatible: No

The left Border Width property is used to specify the width of the left border of the element. The value can be one of three keywords, not affected by the font size or length, and can be used to achieve proportional widths. Negative values are not allowed. You can also use the properties of the left border, the width of the bounding box, or the border to write slightly.

5. Border width

Syntax: Border-width: < value >

Allowable value: [Thin | medium | thick | < length >]{1,4}

Initial value: Not defined

Apply to: All objects

Backward compatible: No

The border Width property sets the bounds of an element with a value of one to four values, which is a keyword or length. Negative length is not allowed. If four values are given, they apply to the style of the top, right, bottom, and left borders respectively. If a value is given, it is applied to each side. If two or three values are given, the omitted values are equal to the edges. This property is abbreviated for the top border width, the right border width, the bottom border width, and the left bounding width property. You can also use a border property that is slightly written.

6. Border color

Syntax: Border-color: < value >

Allowable value: < color >{1,4}

Initial value: The value of the Color property

Apply to: All objects

Backward compatible: No

The border color property sets the border color of an element. You can use one or four keywords. If four values are given, they apply to the style of the top, right, bottom, and left borders respectively. If a value is given, it is applied to each side. If two or three values are given, the omitted values are equal to the edges. You can also use a border property that is slightly written.

7. Border Style

Syntax: Border-style: < value >

Allowable values: [none | dotted | dashed | solid | double | groove | ridge | inset | outset]{1,4}

Initial value: None

Apply to: All objects

Backward compatible: No

The border Style property is used to set the style of an element border. This property must be used to specify a visible border. You can use one or four keywords. If four values are given, they apply to the style of the top, right, bottom, and left borders respectively. If a value is given, it is applied to each side. If two or three values are given, the omitted values are equal to the edges. You can also use a border property that is slightly written.

None: no style;
Dotted: Dot line;
Dashed: dotted line;
Solid: solid line;
Double: two lines;
Groove: Groove Line;
Ridge: Ridge Line;
Inset: concave;
Outset: external convex;