Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to set the width of DIV CSS frame". In daily operation, I believe many people have doubts about how to set the width of DIV CSS frame. The editor consulted all kinds of materials and sorted out a simple and easy-to-use method of operation. I hope it will be helpful for you to answer the question of "how to set the width of DIV CSS frame". Next, please follow the editor to study!

I. CSS style and Grammar

Border style word: border

Css border syntax

1. Border-left:1px solid # 000 sets the black border of 1px solid line on the left side of the object

2. Border-right:1px solid # 000 sets the black border of 1px solid line on the right side of the object

3. Border-top:1px solid # 000 sets the black border of the 1px solid line above the object

4. Border-bottom:1px solid # 000 sets the 1px solid line black border on the bottom edge of the object

5. Border:1px solid # 000sets the black border of 1px solid lines on the four sides of the object

How to set the width of the frame

We can set the border width by using specific numbers + units in the border style values. If you do not set this parameter, only set other parameter values, the border will be 0, that is, no border display (border setting failed).

Try it out:

.div1 {border:1px solid # 000} / * set the border width of the object ".div1" to 1px * /

Corresponding to the part of HTML code application:

.diva {border:2px solid # 000} / * set the border width of the object ".diva" to 2px * /

Corresponding to the part of HTML code application:

.div2 {border:3px solid # 000000} / * set the border width of the object ".div2" to 3px * /

Corresponding to the part of HTML code application:

Third, the practical example of HTML DIV border width

We set up three DIV boxes, named ".div1", ".div2" and ".div3" respectively. In order to observe the effect, we set the same CSS height and CSS width. The frame of the first box is 2px solid line, the second box frame is dashed line 4px, and the third box frame is solid line 8px. All are red CSS borders.

1. The complete HTML source code is as follows:

Border width online demo www..com .div1, .div2, .div3 {width:300px; height:60px Margin-top:5px} / * CSS Note: set the same properties for three style selectors * / .div1 {border:2px solid # F00} .div2 {border:4px dashed # F00} .div3 {border:8px solid # F00} I am set the border width 2px solid border I am set the border width 4px dashed border I am set the border width 8px solid border

The above code sets three instances of borders with different widths and different styles.

2. Screenshot of the effect of an example

Screenshots of three border effects with different border widths and different styles

At this point, the study on "how to set the width of the DIV CSS frame" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.