bootstrap 圆角_Bootstrap的边框样式-优快云博客

本文介绍了如何使用Bootstrap框架快速设置元素边框样式，包括边框的添加与删除、边框颜色选择、边框圆角及大小调整等实用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用边框通用定义类来快速设置元素的边框和边框半径，适用于图像、按钮或任何其他元素。

添加border

添加边框属性，显示指定边框。

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<title>Bootstrap的边框样式</title>
	<style>
		.row span {
			width: 5rem;
			height: 5rem;
			background: #f5f5f5;
		}
	</style>
</head>

<body>
	<div class="container">
		<!-- 添加边 -->
		<div class="row mt-5 justify-content-around">
			<span class="border border-secondary"></span>
			<span class="border-top border-secondary"></span>
			<span class="border-right border-secondary"></span>
			<span class="border-bottom border-secondary"></span>
			<span class="border-left border-secondary"></span>
		</div>
	</div>
</body>

</html>

删除border

在一个空间上定义边框-删除或显示特定边框定义方法。

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<title>Bootstrap的边框样式</title>
	<style>
		.row span {
			width: 5rem;
			height: 5rem;
			background: #f5f5f5;
		}
	</style>
</head>

<body>
	<div class="container">
		<!-- 删除边框 -->
		<div class="row mt-5 justify-content-around">
			<span class="border border-0"></span>
			<span class="border-top border-top-0"></span>
			<span class="border-right border-right-0"></span>
			<span class="border-bottom border-bottom-0"></span>
			<span class="border-left border-left-0"></span>
		</div>
	</div>
</body>

</html>

边框颜色

颜色class
border-primary
border-secondary
border-success
border-danger
border-warning
border-info
border-light
border-dark
border-white

边框圆角

使用.rounded元素可以轻松的定义四个圆角的孤度及显示效果。

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<title>Bootstrap的边框样式</title>
	<style>
		.row span {
			width: 5rem;
			height: 5rem;
			background: #f5f5f5;
		}

		.row div {
			width: 10rem;
			height: 6rem;
			background: #f5f5f5;
		}
	</style>
</head>

<body>
	<div class="container">
		<!-- 边框圆角 -->
		<div class="row mt-5 justify-content-around bg-info py-2">
			<span class="rounded"></span>
			<span class="rounded-top"></span>
			<span class="rounded-right"></span>
			<span class="rounded-bottom"></span>
			<span class="rounded-left"></span>
			<span class="rounded-0"></span>
		</div>
		<div class="row mt-5 justify-content-around bg-info py-2">
			<div class="rounded-circle"></div>
			<div class="rounded-pill"></div>
		</div>
	</div>
</body>

</html>

边框大小

使用.rounded-lg或.rounded-sm可以获得更大或更小的边界半径。

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<title>Bootstrap的边框样式</title>
	<style>
		.row span {
			width: 5rem;
			height: 5rem;
			background: #f5f5f5;
		}
	</style>
</head>

<body>
	<div class="container">
		<!-- 边框大小 -->
		<div class="row mt-5 justify-content-around bg-info py-2">
			<span class="border rounded-lg"></span>
			<span class="border rounded-sm"></span>
		</div>
	</div>
</body>

</html>