Home  >  Article  >  Web Front-end  >  Share the sample code for adding a border style to a div

Share the sample code for adding a border style to a div

黄舟
黄舟Original
2017-07-19 11:18:555520browse

How to add a border style to a div?

Adding a border style to a div box is very simple, just use the border plate style.

1. Dotted and solid borders - TOP

Border dotted line style: dashed
Border implementation style: solid

border:1px dashed #000

means setting the object border width to 1px black dotted line Border

border:1px solid #000


represents setting the object border width to 1px black to achieve the border

2. Add a border to the top of the div - TOP

We give Add a 1px black border to the top of the div

div{border-top:1px solid #000}

3. Add a border to the bottom of the div - TOP

Add a 2px dotted red border to the bottom of the div box

div{border-bottom:2px dashed #F00}

4. Add a border to the left of the div box Add a border to the side - TOP

Add a blue 1px solid border to the left side of the box with a css selector css named ".divcss5"

.divcss5{ border-left:1px solid #00F}

DIV code:

<div class="divcss5">此DIV盒子左侧为1px实线蓝边框</div>

5. Add a border to the right side of the box div - TOP

Add a 1px red solid border to the right side of the div object

div{ border-right:1px solid #F00}

6. Add a border to the top and bottom of the box - TOP

Add 1px to the top and bottom of the box to achieve black borders

div{border-top:1px solid #000;border-bottom:1px solid #000}

7. Add borders to the left and right sides of the div box - TOP

Add 2px dotted green borders to the left and right sides of the box

div{ border-left:2px dashed #0F0;border-right:2px dashed #0F0}

8. Add borders to the div box Add a border to the four sides - TOP

Add 3px to the four sides of a DIV to achieve a black border

div{ border:3px solid #000}

The above is the detailed content of Share the sample code for adding a border style to a div. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn