css超细边框,CSS边框

CSS 边框

The CSS border properties allow you to specify the style,

width, and color of an element's border.

I have borders on all sides.

I have a red bottom border.

I have rounded borders.

I have a blue left border.

CSS Border Style

The border-style property specifies what kind of border to display.

The following values are allowed:

dotted - Defines a dotted border

dashed - Defines a dashed border

solid - Defines a solid border

double - Defines a double border

groove - Defines a 3D grooved border. The effect depends on the border-color value

ridge - Defines a 3D ridged border. The effect depends on the border-color value

inset - Defines a 3D inset border. The effect depends on the border-color value

outset - Defines a 3D outset border. The effect depends on the border-color value

none - Defines no border

hidden - Defines a hidden border

The border-style property can have from one to four values (for

the top border, right border, bottom border, and the left border).

例子

Demonstration of the different border styles:

p.dotted {border-style: dotted;}

p.dashed

{border-style: dashed;}

p.solid {border-style: solid;}

p.double

{border-style: double;}

p.groove {border-style: groove;}

p.ridge

{border-style: ridge;}

p.inset {border-style: inset;}

p.outset

{border-style: outset;}

p.none {border-style: none;}

p.hidden {border-style: hidden;}

p.mix {border-style: dotted dashed solid double;}

Result:

A dotted border.

A dashed border.

A solid border.

A double border.

A groove border. The effect depends on the border-color value.

A ridge border. The effect depends on the border-color value.

An inset border. The effect depends on the border-color value.

An outset border. The effect depends on the border-color value.

No border.

A hidden border.

A mixed border.

来试试吧 »

Note: None of the OTHER CSS border properties (which you will learn more about in the next chapters) will have ANY effect unless the

border-style property is set!