CSS Border and Border-radius

First, border

The 3 attributes of border are Border-width, Border-style, Border-color, respectively.

where Border-color defaults to the foreground color of the element content, border-width defaults to the keyword medium, but the border-style default is none; So, without specifying Border-style, the border will not exist .

About Border-color

Transparent, which is said to be miraculous in certain circumstances, needs to be known to have such an optional value.

White, dotted border, sometimes wonders.

Like what:

Rather, the dotted/dashed border should be the same color as the background color of the parent element.

8 Kinds of Border-style:

(Only if you remember it, you can use it when you need it.) ）

About Mixed Border

With CSS cascading, we can even set different widths, styles, and colors for the borders in four directions, depending on the situation.

Second, Border-radius

Syntax rules:

Border-radius:a b c D; The order is top left, top right, bottom right, bottom left . (Clockwise direction)

BORDER-RADIUS:A b c D/a B C D.; The first group is the horizontal value and the second group is the vertical value.

border-Top-left-radius:a b; Single rounded corners are set up.

( when defining a single fillet, be sure to go up and down, or left or right, otherwise invalid.) )

Attention:

The fillet is not valid for the presence of a border, that is, even if there is no border, it can be set up with rounded corners, which can take effect on the background.

Little tips:border-radius:50%

Third, Box-shadow

H-shadow (required, horizontal shadow position, can be negative);

V-shadow (required, vertical shadow position, can be negative);

Blur (optional, fuzzy distance);

Spread (optional, shadow size);

Color (optional, shadow colors);

Outset (default)/inset (optional, change the outer shadow to an inner shadow).

Tips: Using Box-shadow to achieve border effects

Css:

1{2    width:200px;  3    height:100px;  4    background-color: #ccc;  5    border:10px solid red;  6    border-radius: 10px;  7    box-shadow: 0 0 0 10px Green8 }

Effect:

CSS Border and Border-radius