底边圆角css代码

时间:2023-06-27 16:19:54

为 <div> 元素的底边设置圆角样式,你可以使用 CSS 的 border-bottom-left-radius 和 border-bottom-right-radius 属性。

下面是一个示例,展示如何使用 CSS 设置 <div> 元素的底边圆角:

<style>
.bottom-rounded-div {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
</style>

<div class="bottom-rounded-div">
这是一个带有底边圆角样式的 div 元素。
</div>

在上面的示例中,我们定义了一个 CSS 类名 .bottom-rounded-div,并分别使用 border-bottom-left-radius 和 border-bottom-right-radius 属性将底边的左下角和右下角设置为圆角,圆角半径为 10px。

你可以根据需要调整这两个属性的值来改变底边圆角的大小。请注意,这样设置的圆角只会应用于 <div> 元素的底边。

如果你还想给其他边添加圆角,可以使用对应的属性,例如 border-top-left-radius 和 border-top-right-radius 控制顶边的圆角,border-radius 控制所有边的圆角等。

相关词 圆角 div