CSS border style

CSS border style

You can use border-style to set the border style, or you can set the top, bottom, left, and right styles separately:

border- top-style

border-left-style

border-right-style

border -bottom-style

There are many kinds of border styles, which can be defined, such as single border, dotted border, solid border, double border, and border without border.

      
  
我没有边框
 
点状边框
 
虚线边框
 
实线边框
 
双线边框
 
3D凹槽边框
 
3D 垄状边框
 
3D inset 边框
 
 3D outset 边框
  

CSS border width and color

Border width

The border width is defined by border-width, which can be set up, down, left and right respectively. Properties

border-top-width

border-bottom-width

border-left-width

border-right-width

Border color

The border width is defined by border-color, and the upper and lower sides can also be set separately Left and right 4 attributes

border-top-color

border-bottom-color

border-left -color

border-right-color

       
  
我是设置所有边框的
 
我只负责上面
 
我负责下面
 
我设置的是左边
 
我设置的是右边
  

Set each border individually

In CSS, you can specify different borders on different sides:

Example

p
{
border-top-style:dotted;
border -right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}

above Examples can also set a single attribute:

border-style:dotted solid;

The border-style attribute can have 1- 4 values:

border-style: dotted solid double dashed;

The upper border is dotted

The right border is solid

The bottom border is double

The left border is dashed

border-style:dotted solid double;

The top border is dotted

The left and right borders are solid

The bottom border is double

border-style:dotted solid;

The top and bottom borders are dotted

The right and left borders are solid

border-style:dotted;

The four-sided borders are dotted

The border also has the abbreviation attribute

border: 5px solid red;