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	從父元素繼承屬性。

CSS 右邊框屬性示例

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

定義右邊框屬性的所有值

要在一個宣告中定義 border-right-width、border-right-style 和 border-right-color 的值，我們使用 border-right 屬性。該屬性需要三個值，第一個值用於寬度，第二個值用於樣式，第三個值用於顏色。以下示例演示瞭如何執行此操作。

示例

<!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 屬性的效果。

示例

<!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

列印頁面