CSS 圆角边框

❮ 上一个 下一个 ❯

CSS 圆角边框

border-radius 属性用于为元素添加圆角边框

普通边框

圆角边框

更圆的边框

最圆的边框

示例

p { border: 2px solid red; border-radius: 5px;}

自己动手试一试 »

更多示例

在一行声明中设置所有顶部边框属性此示例演示了在一行声明中设置所有顶部边框属性的简写属性。

设置下边框样式此示例演示了如何设置下边框的样式。

设置左边框宽度此示例演示了如何设置左边框的宽度。

设置四个边框的颜色此示例演示了如何设置四个边框的颜色。它可以包含一到四种颜色。

设置右边框颜色此示例演示了如何设置右边框的颜色。

通过练习来测试自己

练习

使用 border 简写属性为

元素设置“4px”、“dotted”、“red”边框。

This is a heading

This is a paragraph

This is a paragraph

提交答案 »

开始练习

所有 CSS 边框属性

属性

描述

border

在一行声明中设置所有边框属性

border-bottom

在一行声明中设置所有下边框属性

border-bottom-color

设置底部边框的颜色

border-bottom-style

设置底部边框的样式

border-bottom-width

设置底部边框的宽度

border-color（边框颜色）

设置四个边框的颜色

border-left

在一行声明中设置所有左边框属性

border-left-color

设置左边框的颜色

border-left-style

设置左边框的样式

border-left-width

设置左边框的宽度

border-radius

设置所有四个 border-*-radius 属性以实现圆角

border-right

在一行声明中设置所有右边框属性

border-right-color

设置右边框的颜色

border-right-style

设置右边框的样式

border-right-width

设置右边框的宽度

border-style（边框样式）

设置四个边框的样式

border-top

在一行声明中设置所有顶边框属性

border-top-color

设置顶部边框的颜色

border-top-style

设置顶部边框的样式

border-top-width

设置顶部边框的宽度

border-width（边框宽度）

设置四个边框的宽度

❮ 上一个 下一个 ❯

★ +1

W3schools 学习路径

跟踪您的进度 - 免费！

登录 注册