How to add four sides of border css-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

How to add four sides of border css

Jan 05, 2021 am 10:34 AM

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.

How to add four sides of border css

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>

Copy after login

Rendering:

How to add four sides of border css

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>

Copy after login

Rendering:

How to add four sides of border css

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!

Statement of this Website

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