What is the border attribute set by css

In web design, the border is a widely used element. It can add certain visual effects to web elements and can also be used to separate different elements. CSS (Cascading Style Sheets) provides us with some properties to set the style, color, and width of the border. So, how to set the border property in CSS? This article will explain it to you in detail.

1. Border-style attribute

The border-style attribute is used to set the style of the border. It has many optional values:

1. solid: solid line, Is the default value;
2. dashed: dashed line;
3. dotted: dotted line;
4. double: double line;
5. groove: similar to three-dimensional groove effect ;
6. ridge: similar to a three-dimensional convex effect;
7. inset: similar to a concave effect;
8. outset: similar to a convex effect.

The following is an example showing the effects of different border styles:

div {
    border-style: solid; /* 实线 */
}

div.dashed {
    border-style: dashed; /* 虚线 */
}

div.dotted {
    border-style: dotted; /* 点线 */
}

div.double {
    border-style: double; /* 双线 */
}

div.groove {
    border-style: groove; /* 凹槽效果 */
}

div.ridge {
    border-style: ridge; /* 凸起效果 */
}

div.inset {
    border-style: inset; /* 凹入效果 */
}

div.outset {
    border-style: outset; /* 凸出效果 */
}

2. border-width attribute

border-width attribute is used to set the border Width, it also has many optional values, including thin, medium and thick, and can also define specific pixel values ​​or percentage values.

The following is an example showing the effect of different border widths:

div {
    border-style: solid;
    border-width: medium; /* 默认宽度 */
}

div.thin {
    border-width: thin; /* 窄边框 */
}

div.thick {
    border-width: thick; /* 宽边框 */
}

div.custom {
    border-width: 5px; /* 自定义宽度 */
}

3. border-color attribute

The border-color attribute is used to set the color of the border. Can be defined using color names, RGB values ​​or hexadecimal values.

The following is an example showing the effects of different border colors:

div {
    border-style: solid;
    border-width: medium;
}

div.red {
    border-color: red; /* 红色边框 */
}

div.green {
    border-color: green; /* 绿色边框 */
}

div.blue {
    border-color: blue; /* 蓝色边框 */
}

div.custom {
    border-color: #ccc; /* 自定义颜色 */
}

4. border attribute

The border attribute can set the style, width and color of the border at the same time. The supported parameter order is: border-width, border-style, and border-color. You can also use the abbreviation form, such as border: 1px solid black, which means the border width is 1 pixel, the style is solid line, and the color is black.

The following is an example showing the effect of the border attribute:

div {
    border: 1px solid black; /* 简写形式 */
}

div.custom {
    border: 3px dotted #ccc; /* 自定义边框 */
}

Summary

In web design, the border is an important element, which can add additional elements to the web page. Certain visual effects can also be used to separate different elements. CSS provides us with multiple properties to set the style, width and color of the border, including border-style, border-width, border-color and border, etc. Use these properties to easily implement a variety of different styles of borders.

The above is the detailed content of What is the border attribute set by css. For more information, please follow other related articles on the PHP Chinese website!