CSS border border How to use

CSS border Border Property how to use, border have what properties, how to control the object border edge width, color, dashed, solid line and other styles, we will give you in this article detailed introduction

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

CSS Border Basics

CSS border is CSS border is the control of the object's border edge width, color, dashed, solid line style CSS Properties

HTML Table control border:

Border= "1" bordercolor= "#000000"

Note: The control table border width is 1px,css color black, the default is a solid line style border.

Four borders

Border-left set the left border, generally set the left box style to use separately

Border-right set the right border, generally set the right frame style to use separately

Border-top set the top border, generally set the top border style separately using

Border-bottom sets the bottom border, which is usually set by a separate border style, and sometimes the bottom border style can be applied as a CSS underline effect.

Same border with four edges border shorthand

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

Set the Div5 object box 1px pixels Blue Solid line border

Border three styles

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

Border color: border-color: #000

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

Use the number + units to set the border thickness width, such as 1px (the border thickness width is 1 pixels), the border must be a positive number, greater than 0 value. Otherwise, setting the border border style is not valid.

Border border Style: Border-style:solid

The border style values are as follows:

None: No border. Regardless of any specified border-width value

Hidden: Hides the border. IE does not support

Dotted: ie4+ on Mac platforms with ie5.5+ on Windows and UNIX platforms. Otherwise the solid line (common)

Dashed: ie4+ on Mac platforms with ie5.5+ on Windows and UNIX platforms as dashed lines. Otherwise the solid line (common)

Solid: Solid line border (common)

Double: two-line border. Two single line with its interval and 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 3D concave edge according to the value of Border-color

Outset: Draw 3D convex edge according to the value of Border-color

CSS sets the left, right, top, and bottom borders individually

Write a separate CSS style setting for the upper, lower, left, and Right boxes in abbreviated form

1, 1px black dashed top border

border-top:1px Dashed #000

2, 1px black solid line lower border

BORDER-BOTTOM:1PX Solid #000

3, 1px black dashed 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 the mainstream browser compatible border style with:

Solid line border: solid

BORDER:1PX solid #000 Set object 1px (pixel) thick black solid line border.

Dashed border: Dashed

BORDER:1PX dashed #000 Sets the object 1px (pixels) thick black dashed border.

CSS Border Border use

Set the object border style, set the individual top, bottom, left, and right border styles to achieve beauty. The border is divided and the layout function is planned.

Border Border Style optimization shorthand text tutorial

CSS Border application case code

Description: To observe the case effect, we set up a div box with a css width of 200px,css height of 1px and a solid red border.

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

HTML code corresponding fragment:

<div id= "div" > My height is 100px, width is 200px</div>

CSS Border Border Summary

We use div CSS to set the border border style, generally we use shorthand expressions to set the object border border style, so save code to simplify the role of code. Whether you set an edge border or a four-sided border, we all try to abbreviate the way the CSS border code, CSS border optimization shorthand, common object set CSS style using the Property code: border:1px solid #000;.

Xi. there are edges on the three sides and there is no setting skill.

A border is left and right, and the style is a solid border with a black 1PX width, while the top has no border.

CSS Code:

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

Note border:1px solid #000; and Border-top:none, and the order cannot be reversed. Because the CSS reads from top to bottom, left to right reading principle, and first set the entire border style, followed by the declaration of the top border of "none" is not meant to implement the style of the instance. This eliminates the need to set down, left, and right separately, thus saving some code.

CSS border border use so much, the need for friends can be saved, but also please continue to follow the site's other updates.

Related reading:

How to add bold text to CSS

How to set the margin property of CSS

div+css How to use