Home >Web Front-end >CSS Tutorial >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:
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!