In-depth explanation of CSS border property

1. border-width

Why border-width does not support percentages: It is determined by semantics and usage scenarios. In reality, there is no way to use percentages for the concepts of various borders themselves. .

Border-width supports keywords: thin, medium (default), thick, and their sizes are 1px, 3px, and 5px respectively (except IE7).

Why the default value of border-width is medium (3px): Because when border-style is double, at least 3px is required to see the effect.

2. border-style

Border-style is some interesting data for dashed:

border- Differences between browsers whose style is dotted:

　

IE’s dot effect can be used to achieve the rounded corner effect under IE7/8.

The calculation rules for border-style double: the borders on both sides are always equal, and the middle interval is ±1.

Border-style implements three equal icons for double:

3, border-color

The relationship between border-color and color :border-color defaults to the same value as color, similar to box-shadow, text-shadow, etc.

4. Graph construction such as border and triangle

　Using the solid style of border, the construction of triangles can be cleverly realized:

　

　You can also splice two small trapezoids up and down to form a rounded effect:

　　

5. Border and transparent border

Function of transparent border:

• Increase the click area.
  

• #Increase the rendering area.
  

6. Application of border in layout

Border implements equal height layout (border size cannot be a percentage, So the left side is of fixed width):

　

　

The above is the detailed content of In-depth explanation of CSS border property. For more information, please follow other related articles on the PHP Chinese website!