如何使用和样式化 CSS 边框？

2025 年 2 月 28 日 | 阅读 11 分钟

边框是样式功能和特性中一个重要且吸引人的功能。我们可以使用不同的属性和值来获得完美样式的属性。我们可以设置其他 CSS 属性，使边框更具吸引力并系统地显示功能。

边框属性

边框属性用于在元素周围创建边框。我们可以使用侧边和显示边框属性在元素的特定侧设置边框。以下属性用于创建主要边框。

Border-color：我们可以设置边框的颜色。
Border-width：我们可以设置边框的宽度。
Border-style：我们可以设置边框的样式。
其他：我们可以设置除边框属性之外的其他 CSS 属性。

CSS 边框样式属性

border-style 是用于在任何元素周围显示边框的默认且必不可少的属性。以下几点是 border-style 属性的值，用于以不同格式显示边框。格式显示为实线、虚线、偏移等。

Dotted：点状边框
dashed：虚线边框
solid：实线边框
double：双线边框
groove：3D 凹槽边框。
Ridge：3D 山脊边框。
Inset：3D 内嵌边框。
Outset：3D 外嵌边框。
None：无边框样式
hidden：隐藏边框。

语法

以下语法显示了元素的边框样式。

示例

以下示例显示了不同 HTML 元素的边框样式。

 
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
<title> How to use and style border using CSS?
</title>
<style>
container{
/* Border style */
border-style: solid;
padding-left:20px;
padding-right:20px;
}
h1{
margin: auto;
padding: 10px;
color:  Red;
margin-top: 20px;
width: fit-content;
/* Border style */
border-style: dashed;
}
h3{
/* Border style */
border-style: double;
}
b{
/* Border style */
border-style: outset;
}
</style>
</head>
<body>
<container> Basic Border style property </container>
<h1> How to use and style borders using CSS? </h1>
<h3> JavaTPoint Website </h3>
<b> Attractive design and partition of elements are mostly dependent on the selection of border style. </b>
</body>
</html>   

输出

输出显示了不同的边框样式。

CSS Border Width

我们可以使用 px、百分比和其他格式的宽度来显示有吸引力的元素。每种边框样式都需要不同尺寸的宽度。边框宽度在为元素设置边框样式后定义。此属性与边框样式一起使用；否则，它不会在元素上生效。

语法

以下语法显示了元素的边框宽度。

示例

以下示例显示了不同 HTML 元素的基本边框样式和宽度属性。

 
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
<title> How to use and style border using CSS?
</title>
<style>
container{
/* Border style */
border-style: solid;
border-width:5px;
padding-left:20px;
padding-right:20px;
}
h1{
margin: auto;
padding: 10px;
color:  Red;
border-width:4px;
margin-top: 20px;
width: fit-content;
/* Border style */
border-style: dashed;
}
h3{
/* Border style */
border-style: double;
border-width:7px;
}
b{
/* Border style */
border-style: outset;
border-width:5px;
width: fit-content;
margin: auto;
padding: 10px;
}
</style>
</head>
<body>
<container> Basic Border style and width properties </container>
<h1> How to use and style borders using CSS? </h1>
<h3> JavaTPoint Website </h3>
<b> Attractive design and partition of elements are mostly dependent on the selection of border style. </b>
</body>
</html>   

输出

输出显示了不同的边框属性及其样式。

使用 Border-color 属性样式化 CSS 边框

CSS 样式边框用作各种样式和宽度的边框颜色。我们可以使用颜色名称、RGB 颜色和十六进制颜色来设置边框颜色。

语法

以下语法显示了元素的边框颜色。

示例

以下示例显示了不同 HTML 元素的不同边框颜色的基本边框属性。

 
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
<title> How to use and style border using CSS?
</title>
<style>
container{
/* Border style */
border-style: solid;
border-width:5px;
border-color: grey;
padding-left:20px;
padding-right:20px;
}
h1{
margin: auto;
padding: 10px;
color:  Red;
border-width:4px;
border-color: black;
margin-top: 20px;
width: fit-content;
/* Border style */
border-style: dashed;
}
h3{
/* Border style */
border-style: double;
border-width:7px;
border-color: grey;
}
b{
/* Border style */
border-style: outset;
border-width:5px;
border-color: orange;
width: fit-content;
margin: auto;
padding: 10px;
}
</style>
</head>
<body>
<container> Basic Border style property with border color  </container>
<h1> How to use and style borders using CSS? </h1>
<h3> JavaTPoint Website </h3>
<b> Attractive design and partition of elements are mostly dependent on the selection of border style. </b>
</body>
</html>   

输出

输出显示了不同颜色的不同边框属性。

使用边框侧边属性样式化 CSS 边框

CSS 样式边框用作各种样式和宽度的边框颜色。我们可以为所需的侧边设置边框，例如左、右、上和下。

语法

以下语法用于边框侧边及其样式。

 
border-bottom-style : solid;
border-left-style: double;
border-right-style: dotted;
border-top-style: dashed;   

示例

以下示例显示了不同 HTML 元素不同边框侧边的基本边框属性。

 
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
<title> How to use and style border using CSS?
</title>
<style>
container{
/* Border style */
border-width:5px;
border-color: grey;
padding-left:20px;
padding-right:20px;
border-top-style: dashed;
border-right-style: dotted;
border-left-style: dotted;
}
h1{
margin: auto;
padding: 10px;
color:  Red;
border-width:4px;
border-color: black;
margin-top: 20px;
width: fit-content;
/* Border style */
border-bottom-style : solid;
border-top-style : solid;
}
h3{
/* Border style */
border-left-style: double;
border-top-style: double;
border-width:7px;
border-color: grey;
}
b{
/* Border style */
border-right-style: dotted;
border-bottom-style: dotted;
border-width:5px;
border-color: orange;
width: fit-content;
margin: auto;
padding: 10px;
}
</style>
</head>
<body>
<h1> How to use and style borders using CSS? </h1>
<br>
<container> Basic Border style property with border sides  </container>
<h3> JavaTPoint Website </h3>
<b> Attractive design and partition of elements are mostly dependent on the selection of border style. </b>
</body>
</html>   

输出

输出显示了不同侧边的不同边框属性。

使用边框简写属性样式化 CSS 边框

CSS 样式边框属性用于设置各种样式、颜色和宽度的边框。我们可以使用包括宽度、颜色和样式在内的简写属性来设置边框。

语法

以下语法用于边框简写及其样式。

 
border:  (border-width) (border-style) (border-color);
border: 1px solid orange;   

示例

以下示例显示了不同 HTML 元素不同边框宽度、样式和颜色的基本边框属性。

 
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
<title> How to use and style border using CSS?
</title>
<style>
container{
/* Border shorthand property */
border: 5px groove pink;
padding-left:20px;
padding-right:20px;
}
h1{
margin: auto;
padding: 10px;
color:  Red;
margin-top: 20px;
width: fit-content;
/* Border shorthand property */
border: 5px dashed pink;
}
h3{
/* Border shorthand property */
border: 5px dotted pink;
}
b{
/* Border shorthand property */
border: 1px solid black;
width: fit-content;
margin: auto;
padding: 10px;
}
</style>
</head>
<body>
<h1> How to use and style borders using CSS? </h1>
<br>
<container> Basic Border style property with border shorthand property  </container>
<h3> JavaTPoint Website </h3>
<b> Attractive design and partition of elements are mostly dependent on the selection of border style. </b>
</body>
</html>   

输出

输出显示了不同侧边的不同边框属性。

使用 Border-radius 属性样式化 CSS 边框

CSS 样式边框属性用于使用 border-radius 属性设置边框半径。

语法

以下语法显示了元素的边框半径。

示例

以下示例显示了具有边框半径的基本边框属性。

 
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
<title> How to use and style border using CSS?
</title>
<style>
container{
/* Border shorthand property */
border: 5px groove pink;
padding-left:20px;
padding-right:20px;
/* Border radius property */
border-radius: 18px;
}
h1{
margin: auto;
padding: 10px;
color:  Red;
margin-top: 20px;
width: fit-content;
/* Border shorthand property */
border: 5px dashed pink;
/* Border radius property */
border-radius: 15px;
}
h3{
/* Border shorthand property */
border: 5px dotted pink;
/* Border radius property */
border-radius: 25px;
}
b{
/* Border shorthand property */
border: 1px solid black;
width: fit-content;
margin: auto;
padding: 10px;
/* Border radius property */
border-radius: 5px;
}
</style>
</head>
<body>
<h1> How to use and style borders using CSS? </h1>
<br>
<container> Basic Border style property with border-radius property  </container>
<h3> JavaTPoint Website </h3>
<b> Attractive design and partition of elements are mostly dependent on the selection of border style. </b>
</body>
</html>    

输出

输出显示了具有半径的不同边框属性。

CSS 边框内的内边距

CSS padding 属性在边框和元素的之间建立了一个空间。如果未定义 padding 属性，则元素边框和内容之间没有间隙。

我们可以使用长度或百分比值来设置 padding 属性以添加空间。需要正值。负数不会产生结果。

示例

以下示例显示了具有内边距的基本边框属性。

 
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
<title> How to use and style border using CSS?
</title>
<style>
container{
border: 5px groove pink;
/* Border padding property */
padding-left:25px;
padding-right:20px;
border-radius: 18px;
}
h1{
margin: auto;
/* Border padding property */
padding: 5%;
color:  Red;
margin-top: 20px;
width: fit-content;
border: 5px dashed pink;
border-radius: 15px;
}
h3{
border: 5px dotted pink;
border-radius: 25px;
/* Border padding property */
padding: 10px 15px;
}
b{
border: 1px solid black;
width: fit-content;
margin: auto;
/* Border padding property */
padding: 15px;
border-radius: 5px;
}
</style>
</head>
<body>
<h1> How to use and style borders using CSS? </h1>
<br>
<container> Basic Border style property with border padding property  </container>
<h3> JavaTPoint Website </h3>
<b> Attractive design and partition of elements are mostly dependent on the selection of border style. </b>
</body>
</html>   

输出

输出显示了具有内边距的不同边框属性。

CSS 边框阴影

可以通过将 CSS box-shadow 属性与 border 属性结合来产生阴影效果。h-offset 和 v-offset 是设置 border-style 属性所需的两个值。下面，我们定义这些

H-offset：此数字确定阴影的水平偏移。当值为正数时，阴影放置在框的右侧；当值为负数时，阴影放置在框的左侧。
V-offset：此数字确定阴影的垂直偏移。当值为正数时，阴影位于框下方；当值为负数时，阴影位于框上方。

要修改框阴影，请在 h- 和 v-offset 值之后放置这四个可选值。

Blur：要创建模糊效果，请添加第三个值。数字越高，阴影就越模糊。

示例

以下示例显示了实线边框样式的不同边框阴影。

 
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
<title> How to use and style border using CSS?
</title>
<style>
container{
border: 5px groove green;
border-radius: 18px;
}
h1{
margin: auto;
color:  Red;
margin-top: 20px;
width: fit-content;
border: 5px dashed red;
border-radius: 15px;
}
.shadow {
  border: 2px solid grey;
  padding: 10px;
  box-shadow: 5px 4px;
}
.blur {
  border: 2px solid yellow;
  padding: 10px;
  box-shadow: 6px 4px 8px orange;
}
.spread1 {
  border: 2px solid black;
  padding: 10px;
  box-shadow: 5px 4px 7px 4px grey;
}
.spread2 {
  border: 2px solid;
  padding: 10px;
  box-shadow: 6px 4px 8px -2px red;
}
.colorshadow {
  border: 2px solid blue;
  padding: 10px;
  box-shadow: 6px 4px navy;
}
.inset {
  border: 2px solid lightblue;
  padding: 10px;
  box-shadow: 6px 4px inset blue;
}
.multiple {
  border: 1px solid orange;
  padding: 10px;
  box-shadow: 5px 5px #00A4BD, 9px 9px #FF7A59, 15px 15px #334758;
}
</style>
</head>
<body>
<h1> How to use and style borders using CSS? </h1>
<br>
<container> Basic Border style property with border shadow property  </container>
<p class="shadow"> JavaTPoint Website: The box shows a shadow.</p>
<p class="blur"> JavaTPoint Website: The box shows a blurred shadow.</p>
<p class="spread1"> JavaTPoint Website: The box shows a shadow with a positive spread radius.</p>
<p class="spread2"> JavaTPoint Website: The box shows a shadow with a negative spread radius.</p>
<p class="color shadow"> JavaTPoint Website: The box shows a shadow with a defined color.</p>
<p class="inset"> JavaTPoint Website: The box shows an inset shadow.</p>
<p class="multiple"> JavaTPoint Website: The box shows multiple shadows.</p>
</body>
</html>   

输出

输出显示了具有内边距的不同边框属性。

使用边框侧边属性的 CSS 边框宽度

CSS 样式边框用作各种样式和颜色的边框宽度。我们可以为所需的侧边设置边框，例如左、右、上和下。

语法

以下语法用于边框侧边及其宽度。

 
border-bottom-width: length|thin|medium|thick|initial|inherit;
border-left-width: length|thin|medium|thick|initial|inherit;
border-right-width: length|thin|medium|thick|initial|inherit;
border-top-width: length|thin|medium|thick|initial|inherit;   

示例

以下示例显示了不同 HTML 元素不同边框侧边的基本边框侧边属性。

 
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
<title> How to use and style border using CSS?
</title>
<style>
container{
/* Border style */
border-color:  grey;
padding-left:20px;
padding-right:20px;
border-style: solid;
 border-top-width: thick;
border-right-width: length;
border-left-width: length;
}
h1{
margin: auto;
padding: 10px;
color:  Red;
border-color: black;
margin-top: 20px;
width: fit-content;
/* Border style */
border-style: dashed;
border-bottom-width: medium;
border-top-width: thick;
}
h3{
/* Border style */
border-left-width: thin;
border-top-width: thin;
border-style: dotted;
border-color: grey;
}
b{
/* Border style */
border-top-width: thin;
border-bottom-width: thick;
border-style: double;
border-color: orange;
width: fit-content;
margin: auto;
padding: 10px;
}
</style>
</head>
<body>
<h1> How to use and style borders using CSS? </h1>
<br>
<container> Basic Border style property with border width  </container>
<h3> JavaTPoint Website </h3>
<b> Attractive design and partition of elements are mostly dependent on the selection of border style. </b>
</body>
</html>   

输出

输出显示了不同侧边的不同边框属性。

使用边框侧边属性的 CSS 边框颜色

CSS 样式边框用作各种样式边框的边框颜色，用于其样式。我们可以为所需的侧边设置边框，例如左、右、上和下。

语法

以下语法用于边框侧边及其颜色。

 
border-bottom-color: color_name;
border-left-color: color_name;
border-right-color: color_name;
border-top-color: color_name;   

示例

以下示例显示了不同 HTML 元素不同颜色和不同侧边的基本边框侧边属性。

 
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
<title> How to use and style border using CSS?
</title>
<style>
container{
padding-left:20px;
padding-right:20px;
/* Border style */
border-top-style: solid; 
border-top-width: thick;
border-top-color: orange; 
}
h2{
margin: auto;
padding: 10px;
color:  Red;
border-color: black;
margin-top: 20px;
width: fit-content;
/* Border style */
border-right-style: dashed; 
border-right-width: thick;
border-right-color: blue; 
border-left-style: dashed; 
border-left-width: thick;
border-left-color: blue; 
}
h3{
/* Border style */
border-top-style: dotted; 
border-top-width: thick;
border-top-color: aqua; 
border-bottom-style: dotted; 
border-bottom-width: thick;
border-bottom-color: aqua; 
}
b{
/* Border style */
border-bottom-style: double; 
border-bottom-width: thick;
border-bottom-color: green; 
width: fit-content;
margin: auto;
padding: 10px;
}
</style>
</head>
<body>
<h2> How to use and style borders using CSS? </h2>
<br>
<container> Basic Border style property with border color  </container>
<h3> JavaTPoint Website </h3>
<b> Attractive design and partition of elements are mostly dependent on the selection of border style. </b>
</body>
</html>   

输出

输出显示了不同侧边不同颜色的不同边框属性。

结论

边框样式用于使用不同的尺寸、颜色和图案分隔元素。我们可以为元素创建一个有吸引力且有效的边框。

下一个主题CSS Onclick

如何使用和样式化 CSS 边框？

边框属性

CSS 边框样式属性

CSS Border Width

使用 Border-color 属性样式化 CSS 边框

使用边框侧边属性样式化 CSS 边框

使用边框简写属性样式化 CSS 边框

使用 Border-radius 属性样式化 CSS 边框

CSS 边框内的内边距

CSS 边框阴影

使用边框侧边属性的 CSS 边框宽度

使用边框侧边属性的 CSS 边框颜色

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

如何使用和样式化 CSS 边框？

边框属性

CSS 边框样式属性

CSS Border Width

使用 Border-color 属性样式化 CSS 边框

使用边框侧边属性样式化 CSS 边框

使用边框简写属性样式化 CSS 边框

使用 Border-radius 属性样式化 CSS 边框

CSS 边框内的内边距

CSS 边框阴影

使用边框侧边属性的 CSS 边框宽度

使用边框侧边属性的 CSS 边框颜色

结论

相关帖子

CSS Drop Shadow Font

Grouping Selector in CSS

CSS Wrap

CSS + Selector

Background Image Linear Gradient CSS

CSS Float Right

CSS Animation Delay

Class vs Id

CSS Onclick

CSS Compressor

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器