How to add four sides of border css
Jan 05, 2021 am 10:34 AMHow to set the four sides of the border in css: 1. Use the border-bottom attribute to set the bottom border; 2. Use the border-left attribute to set the left border; 3. Use the border-right attribute to set the right border; 4. Use border The -top attribute sets the top border.
The operating environment of this tutorial: Windows 7 system, css3 version, Dell G3 computer.
Related recommendations: "css video tutorial"
How to add four sides of border css?
1. Use the border attribute to set the styles of four borders at once
border: Set all border attributes in one statement.
Settable border attributes:
border-width: Specify the border width
border-style: Specify the border style
border-color: Specify the border Color
Example: Set four border styles
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> p { border:5px solid red; } </style> </head> <body> <p>段落中的一些文本。</p> </body> </html>
Rendering:
2. Use border-bottom, border-left, border-right and border-top set the styles of four borders respectively
border-bottom: Set all bottom border properties in one statement.
border-left: Set all left border properties in one statement.
border-right: Set all right border properties in one statement.
border-top: Set all top border properties in one statement.
Example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> p { border-bottom:thick dotted #ff0000; border-left:thick solid #ff0000; border-top:thick dashed #ff0000; border-right:thick double #ff0000; } </style> </head> <body> <p>段落中的一些文本。</p> </body> </html>
Rendering:
The above is the detailed content of How to add four sides of border css. For more information, please follow other related articles on the PHP Chinese website!

Hot Article

Hot tools Tags

Hot Article

Hot Article Tags

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

What language is the browser plug-in written in?
