Home > Article > Web Front-end > How to add four sides of border css
How 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!