CSS - border-right 属性

CSS border-right 属性是用于定义 border-right-width，border-right-style 和 border-right-color 属性值的简写形式。 border-right-style 属性是必需的。如果未指定颜色和宽度，则将使用默认值。

语法

border-right: border-width border-style border-color | initial | inherit;

属性值

值	描述
border-right-width	指定元素右边框的宽度。可选。默认值为 medium。
border-right-style	指定元素右边框的样式。必需。默认值为 none。
border-right-color	指定元素右边框的颜色。可选。默认值为文本颜色。
initial	将属性设置为其默认值。
inherit	从父元素继承属性。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

CSS 右边框属性示例

以下示例说明了使用不同值的 border-right 属性。

定义右边框属性的所有值

要在一个声明中定义 border-right-width、border-right-style 和 border-right-color 的值，我们使用 border-right 属性。该属性需要三个值，第一个值用于宽度，第二个值用于样式，第三个值用于颜色。以下示例演示了如何执行此操作。

示例

Open Compiler

<!DOCTYPE html>
<html>

<head>
   <style>
      .properties {
         text-align: center;
         padding: 20px;
      }

      .example1 {
         background-color: lightgreen;
         border-right: blue 15px solid;
      }

      .example2 {
         border: 2px solid black;
         border-right: 5px dashed red;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-right property
   </h2>
   <h4 class="properties example1">
      This shows a blue right border
      for a 'h4' tag
   </h4>
   <p class=" properties example2">
      This shows a 'red' right border 
   </p>
</body>

</html>

右边框属性的组成属性

border-right 属性是 border-right-width、border-right-style 和 border-right-color 属性的组合。以下示例演示了如何组合使用这些属性来显示 border-right 属性的效果。

示例

Open Compiler

<!DOCTYPE html>
<html>

<head>
   <style>
      .properties {
         text-align: center;
         padding: 20px;
      }

      .example1 {
         background-color: lightgray;
         border-right-width: 15px;
         border-right-style: solid;
         border-right-color: green;
      }

      .example2 {
         border: 2px solid black;
         border-right-width: 25px;
         border-right-style: solid;
         border-right-color: brown;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-right property
   </h2>
   <h4 class="properties example1">
      This shows a green right border for a 'h4' tag
   </h4>
   <p class=" properties example2">
      This shows a 'brown' right border
   </p>
</body>

</html>

支持的浏览器

属性
border-right	1.0	4.0	1.0	1.0	3.5

css_properties_reference.htm

打印页面