CSS边框属性详解与示例-CSDN博客

本文链接：https://blog.csdn.net/weixin_45660035/article/details/119598454

1.常用边框属性总结

边框属性	说明
border-style	指定边框的类型，常用的有solid(实体) dashed(虚线) none(默认，无边框)
border-width	指定边框的宽度，注意它会扩大原有的容器大小，如果设置了该属性，想容器大小不变必须改变其长宽
border-color	指定边框的颜色
border-radius	设置圆角边框

2.代码示例

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>test1</title>
  <style>
    div {
      width: 800px;
      height: 400px;
      /* 指定边框的类型 solid(实体)  dashed(虚线) none(默认，无边框)*/
      border-style: solid;
      /* 设置边框的宽度，注意它会扩大原有的容器大小，如果设置了该属性，想容器大小不变必须改变其长宽 */
      border-width: 1px;
      /* 指定边框的颜色 */
      border-color: rgba(235, 231, 15, 0.4);
      /* 设置圆角边框 */
      border-radius: 200px;
    }
  </style>
</head>

<body>
  <div>
    这是一段测试用的文字
  </div>
</body>

</html>