CSS 圆角边框

CSS 圆角边框

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

普通边框

圆角边框

圆角边框

圆角边框

实例

  1. p {
  2.   border: 2px solid red;
  3.   border-radius: 5px;
  4. }

更多实例

一个声明中的所有上边框属性

本例演示简写属性，用于在一条声明中设置上边框的所有属性。

  1. <head>
  2. <style>
  3. p {
  4.   border-style: solid;
  5.   border-top: thick double #ff0000;
  6. }
  7. </style>
  8. </head>
  9. <body>
  11. <p>这是段落中的一些文本。</p>
  13. </body>

设置下边框的样式

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

  1. <head>
  2. <style>
  3. p {border-style: solid;}
  4. p.none {border-bottom-style: none;}
  5. p.dotted {border-bottom-style: dotted;}
  6. p.dashed {border-bottom-style: dashed;}
  7. p.solid {border-bottom-style: solid;}
  8. p.double {border-bottom-style: double;}
  9. p.groove {border-bottom-style: groove;}
  10. p.ridge {border-bottom-style: ridge;}
  11. p.inset {border-bottom-style: inset;}
  12. p.outset {border-bottom-style: outset;}
  13. </style>
  14. </head>
  15. <body>
  17. <p class="none">无下边框。</p>
  18. <p class="dotted">点状下边框。</p>
  19. <p class="dashed">虚线下边框。</p>
  20. <p class="solid">实线下边框。</p>
  21. <p class="double">双线下边框。</p>
  22. <p class="groove">凹槽下边框。</p>
  23. <p class="ridge">垄状下边框。</p>
  24. <p class="inset">内陷下边框。</p>
  25. <p class="outset">凸出下边框。</p>
  27. </body>

设置左边框的宽度

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

  1. <head>
  2. <style>
  3. p {
  4.   border-style: solid;
  5.   border-left-width: 15px;
  6. }
  7. </style>
  8. </head>
  9. <body>
  11. <p><b>注释：</b>如果单独使用，"border-left-width" 属性不起作用。请首先使用 "border-style" 属性来设置边框。</p>
  13. </body>

设置四条边框的颜色

本例演示如何设置四条边框的颜色。它可以拥有一到四种颜色。

  1. <head>
  2. <style>
  3. p.one {
  4.   border-style: solid;
  5.   border-color: #0000ff;
  6. }
  8. p.two {
  9.   border-style: solid;
  10.   border-color: #ff0000 #0000ff;
  11. }
  13. p.three {
  14.   border-style: solid;
  15.   border-color: #ff0000 #00ff00 #0000ff;
  16. }
  18. p.four {
  19.   border-style: solid;
  20.   border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255);
  21. }
  22. </style>
  23. </head>
  24. <body>
  26. <p class="one">一种颜色的边框！</p>
  27. <p class="two">两种颜色的边框！</p>
  28. <p class="three">三种颜色的边框！</p>
  29. <p class="four">四种颜色的边框！</p>
  30. <p><b>注释：</b>如果单独使用，"border-color" 属性不起作用。请首先使用 "border-style" 属性来设置边框。</p>
  32. </body>

设置右边框的颜色

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

  1. <head>
  2. <style>
  3. p {
  4.   border-style: solid;
  5.   border-right-color: #ff0000;
  6. }
  7. </style>
  8. </head>
  9. <body>
  11. <p>这是段落中的一些文本。</p>
  13. </body>

所有 CSS 边框属性

属性 描述
border 简写属性，在一条声明中设置所有边框属性。
border-color 简写属性，设置四条边框的颜色。
border-radius 简写属性，可设置圆角的所有四个 border-*-radius 属性。
border-style 简写属性，设置四条边框的样式。
border-width 简写属性，设置四条边框的宽度。
border-bottom 简写属性，在一条声明中设置所有下边框属性。
border-bottom-color 设置下边框的颜色。
border-bottom-style 设置下边框的样式。
border-bottom-width 设置下边框的宽度。
border-left 简写属性，在一条声明中设置所有左边框属性。
border-left-color 设置左边框的颜色。
border-left-style 设置左边框的样式。
border-left-width 设置左边框的宽度。
border-right 简写属性，在一条声明中设置所有右边框属性。
border-right-color 设置右边框的颜色。
border-right-style 设置右边框的样式。
border-right-width 设置右边框的宽度。
border-top 简写属性，在一条声明中设置所有上边框属性。
border-top-color 设置上边框的颜色。
border-top-style 设置上边框的样式。
border-top-width 设置上边框的宽度。