CSS3 Border Style

When we design the Web page style, often use the border, then CSS in the specific style of the border, let us look at.

First of all, when setting border in CSS, we generally give three values, line style, line thickness, line color.

The above three values, the line style is must be set, otherwise the border can not be displayed on the page, border line style has four kinds, namely:

Solid Line (solid)
Point line (dotted)
Double solid Line (double)
Dashed line (dashed)

The weight and color can default, and the weight defaults to 3px, and the color is determined by the text color of the current element.

So we can usually write this in the initial border: the element name. {border:solid 1px red;}, set three values at the same time.

And then we'll see border. In addition to the default of four boxes can also be used.

First, use border to underline the split line

We know that in HTML you can use HR to underline the split line, but the HR split line can't set the weight style, which is inconvenient to use.

So we can use border to set an upper or lower border for an element to achieve the effect of dividing lines.

The specific code is as follows:

P{border-bottom:solid 1px Red;}

The effect of dividing line is realized by setting a 1px red lower border line for P element and adjusting the position of border.

You can also choose to use border other edges to set different effects

Second, use border to add fillet effects to Element shapes

The elements we see in the Web page are not just square rectangles, sometimes rounded corners, so how does that happen?

It is also a border border application.

The code is p:{border:solid 1px red;

border-radius:3px;}

Indicates that a fillet with a radius of 3px is added to the P element, and 3px represents the arc size of the fillet, the higher the value, the greater the Radian

You must give the border style before you can set a fillet, or you cannot display it on the page.

These are some of the actual applications of the border border in CSS, and there are more styles for us to discover together.

CSS3 Border Style