How to use CSS border

How to use the border property of CSS border, what properties does border have, and how to control the width, color, dashed line, solid line and other styles of the object's border. We will give you a detailed introduction in this article

CSS border is CSS border-border border style color, border style, border width syntax structure and application case tutorial

CSS border basic knowledge

CSS border is CSS border is a control object Border line width, color, dashed line, solid line and other style CSS properties

Html formControl border:

border="1" bordercolor="#000000"

Instructions: Control the width of the table border to 1px, the css color to black, and the default is a solid style border.

Four borders

border-left Sets the left border. Generally, it is used to set the left border style separately.

border-right Sets the right border. Generally, it is used to set the right border style separately.

border-top Sets the top border. Generally, it is used to set the top border style separately.

border-bottom Sets the bottom border. It is generally used to set the bottom border style separately. Sometimes the bottom border style can be set separately. The border style is applied as a css underline effect.

The abbreviation of border with the same border on all four sides

#div{border:1px solid #00F}

Sets the 1px pixel blue solid border of the div5 object box

Three styles of borders

Usually we can set the three attributes and parameters of the border: width (thickness), border style, and border color.

Border color: border-color:#000

Border thickness (width): border-width:1px

Use number + unit to set the border thickness width, such as 1px (border thickness width is 1 pixel). The border must be a positive number, a value greater than 0. Otherwise, setting the border style is invalid.

border border style: border-style:solid

The border style values ​​are as follows:

none: No border. Independent of any specified border-width value

hidden: Hide the border. IE does not support

dotted: IE4+ on the MAC platform and IE5.5+ on the WINDOWS and UNIX platforms are dotted lines. Otherwise, it is a solid line (commonly used)

dashed: On the MAC platform, IE4+ and WINDOWS and IE5.5+ on the UNIX platform are dotted lines. Otherwise, it is a solid line (commonly used)

solid: solid line border (commonly used)

double: double-line border. The sum of two single lines and their interval is equal to the specified border-width value

groove: Draw a 3D groove based on the value of border-color

ridge: Draw a diamond border based on the value of border-color

inset: Draw a 3D concave edge according to the value of border-color

outset: Draw a 3D convex edge according to the value of border-color

CSS sets the left border, right border, Top border, bottom border

Write the upper, bottom, left, and right borders in abbreviations and separate CSS style setting methods

1, 1px black dotted upper border

border-top:1px dashed #000

2, 1px black solid line bottom border

border-bottom:1px solid #000

3, 1px black dotted line left border

border-left:1px dashed #000

4, 1px black solid line right border

border-right:1px solid #000

Commonly recommended border styles

We usually use mainstream browser-compatible border styles:

Solid border: solid

Border:1px solid #000 Set the object to a 1px (pixel) thick black solid border.

Dashed border: dashed

Border:1px dashed #000 Set the object’s 1px (pixel) thick black dotted border.

Use of css border border

Set the object border style, set separate upper border, lower border, left border, and right border styles to achieve beautification and beauty. The border plays the role of segmentation and layout planning.

Border border style optimization abbreviated graphic tutorial

css border application case code

Description: In order to observe the case effect, we set a css width of 200px, css height of 1px, red DIV box with solid border

#div{height:100px;width:200px;border:1px solid #F00}

Corresponding snippet of HTML code:

<div id="div">我的高度为100px,宽度为200px</div>

css border summary

We use DIV CSS to set the border style, generally we use the abbreviation Expression Set the object border style, which saves code and simplifies the code function. Whether setting a single border or a four-sided border, we try to abbreviate the CSS border code, which is the abbreviation of CSS border optimization. Commonly used attribute codes for setting CSS styles on objects are: border:1px solid #000;.

11. Three sides have borders but one side has no setting skills

For example, there are borders on the left and right bottoms and the style is a black 1PX width solid border, but there is no border on the top.

CSS code:

border:1px solid #000; border-top:none;

Note that the order of border:1px solid #000; and border-top:none; cannot be exchanged. Because CSS reading has the principle of reading from top to bottom and from left to right, it is meaningless to set the entire border style first and then declare the top border to "none", that is, to achieve the style required by this instance. This eliminates the need to set the bottom, left, and right settings separately, thereby saving a certain amount of code.

There are so many ways to use the CSS border. Friends who need it can save it. Please also continue to pay attention to other updates on this site.

Related Reading:

How to bold text in CSS

How to set the margin attribute of CSS

How to use DIV+CSS

The above is the detailed content of How to use CSS border. For more information, please follow other related articles on the PHP Chinese website!