CSS border

 As the name suggests, border means border. In CSS, you can use border syntax to make a variety of design changes to the border, such as setting the width, style, color, etc. of the border. You can also hide the border. In principle, CSS treats the border. The design of is not limited to the borders of DIV blocks or spans , but can also be applied to the borders of other web elements, such as the borders of the page title, the border of the picture ( img border )... etc. All major browsers support CSS border property.

Introduction to CSS border syntax

border: border thickness, border color, border style;

The standard css border rule has three parameters from left to right. Each parameter is separated by a half-shaped space. The first parameter is the thickness of the border ( border-width ). Generally, standard webpage units such as px and em are used. The two parameters indicate the color of the border ( border-color ), you can use the color standard color code or the English name of the color, and the third parameter is the border style ( border-style ), you can set solid line, dashed line, double solid line, continuous Point... Many different styles.

CSS border syntax example 1: Add a border directly to the DIV block

<div style="border:5px #FFAC55 solid;">
This is a border test
</div>

In this example, we set the border width of the < div > block to be 5px, the border color is light orange (#FFAC55), and the border style is solid (solid), the rendering effect is as follows

This is the border test

In this example, there is nothing special about the width and color of the border. You can set it according to your preference. In addition to writing the width, color and style of the border together, you can actually write it independently, such as border-width (Border width), border-color (border color) and border-style (border style). In addition, the border can be designed differently for the four sides. The representation of the four directions: border-top at the top, border-right at the right, border-bottom at the bottom, and border-left at the left.

CSS border example two, independent design for the four sides

<style type="text/css">
#BorderBox{
　border-top:5px black solid; //The width of the upper border is set to 5px, and the color is black
　border-right:8px red double; //The width of the right border is set to 8px , The color is red, and the style is double
　border-left:7px yellow dotted; //The width of the left border is set to 7px, the color is yellow, and the style is dotted
　border-bottom:3px blue dashed; //The width of the bottom border is set to 3px, The color is blue, the style is dashed
　padding:30px;
}
</style>
<div id="BorderBox">Four different border designs</div>

The output of the above example is

Four different border designs

The use of different colors or styles for borders in each direction is also a common method used by designers. It is easy to piece together different ice color styles, but it is better to match the style of the entire web page. If you don't need to design each side separately, it will be more efficient to use the integrated writing method of Example 1 to manage all the borders at once.

Remarks, please use the color code table to select the border color .

CSS3 provides more powerful web page element border design functions, please refer to: CSS3 border design .