CSS - border-right-style Property

Quiz

CSS border-right-style property sets the style of an element's right border.

Syntax

border-right-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;

Property Values

Value	Description
none	It specifies no border. Default value.
hidden	It is similar to none, except in border conflict resolution for table elements.
dotted	It specifies a dotted border.
dashed	It specifies a dashed border.
solid	It specifies a solid border.
double	It specifies a double border.
groove	It specifies a 3D grooved border. Effect depends on the border-color value.
ridge	It specifies a 3D ridged border. Effect depends on the border-color value.
inset	It specifies a 3D inset border. Effect depends on the border-color value.
outset	It specifies a 3D outset border. Effect depends on the border-color value.
initial	This sets the property to the default value.
inherit	This inherits the property from the parent element.

Examples of CSS Border Right Style Property

The following examples explain the border-right-style property with different values.

None Border Right Style

To not have any right border, we use the none value. In the following example, none value has been used.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-none {
         border-right-style: none;
         text-align: center;
         padding: 15px;
         margin: 8px;
      }

      h1 {
         background-color: lightgreen;
      }

      p {
         border: 6px solid silver;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-right-style property
   </h2>
   <div>
      <h1 class="border-none">
         This heading has 'none' right border style
      </h1>
      <p class="border-none">
         This border has 'none' right border style
      </p>
   </div>
</body>

</html>

Transparent Border Right Style

To have a border that exists but is not visible, we can use the transparent value. The transparent value creates invisible border as compared to none, which creates no border. This difference is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .borders {
         padding: 15px;
         margin: 8px;
         text-align: center;
      }

      .border1 {
         border: 8px solid silver;
         border-right-style: none;
      }

      .border2 {
         border: 8px solid silver;
         border-right-color: gold;
         border-right-style: transparent;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-right-style property
   </h2>
   <div>
      <p class="borders border1">
         This border is using none value, 
         so it does not have right border
         indicated by the gap.
      </p>
      <p class="borders border2">
         This border is using transparent value,
         so it has an invisible border. Since the border
         exist, the border color is applied to it 
         indicated by the gold color.
      </p>
   </div>
</body>

</html>

Dotted Border Right Style

To have dotted right border, we use the dotted value. In the following example, dotted value has been used with the border-right-style property.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-none {
         border-right-style: dotted;
         border-right-color:black;
         border-right-width:6px;
         text-align: center;
         padding: 15px;
         margin: 8px;
      }

      h1 {
         background-color: lightgreen;
      }

      p {
         border: 6px solid silver;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-right-style property
   </h2>
   <div>
      <h1 class="border-none">
         This heading has 'dotted' right border style
      </h1>
      <p class="border-none">
         This border has 'dotted' right border style
      </p>
   </div>
</body>

</html>

Dashed Border Right Style

To have dashed right border, we use the dashed value. In the following example, dashed value has been used with the border-right-style property.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-none {
         border-right-style: dashed;
         border-right-color:black;
         border-right-width:6px;
         text-align: center;
         padding: 15px;
         margin: 8px;
      }

      h1 {
         background-color: lightgreen;
      }

      p {
         border: 6px solid silver;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-right-style property
   </h2>
   <div>
      <h1 class="border-none">
         This heading has 'dashed' right border style
      </h1>
      <p class="border-none">
         This border has 'dashed' right border style
      </p>
   </div>
</body>

</html>

Solid Border Right Style

To have solid right border, we use the solid value. In the following example, solid value has been used with the border-right-style property.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-none {
         border-right-style: solid;
         border-right-color:black;
         border-right-width:6px;
         text-align: center;
         padding: 15px;
         margin: 8px;
      }

      h1 {
         background-color: lightgreen;
      }

      p {
         border: 6px solid silver;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-right-style property
   </h2>
   <div>
      <h1 class="border-none">
         This heading has 'solid' right border style
      </h1>
      <p class="border-none">
         This border has 'solid' right border style
      </p>
   </div>
</body>

</html>

Double Border Right Style

To have double right border, we use the double value. In the following example, double value has been used with the border-right-style property.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-none {
         border-right-style: double;
         border-right-color:black;
         border-right-width:6px;
         text-align: center;
         padding: 15px;
         margin: 8px;
      }

      h1 {
         background-color: lightgreen;
      }

      p {
         border: 6px solid silver;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-right-style property
   </h2>
   <div>
      <h1 class="border-none">
         This heading has 'double' right border style
      </h1>
      <p class="border-none">
         This border has 'double' right border style
      </p>
   </div>
</body>

</html>

Groove Border Right Style

To have groove right border, we use the groove value. In the following example, groove value has been used with the border-right-style property.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-none {
         border-right-style: groove;
         border-right-color:black;
         border-right-width:6px;
         text-align: center;
         padding: 15px;
         margin: 8px;
      }

      h1 {
         background-color: lightgreen;
      }

      p {
         border: 6px solid silver;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-right-style property
   </h2>
   <div>
      <h1 class="border-none">
         This heading has 'groove' right border style
      </h1>
      <p class="border-none">
         This border has 'groove' right border style
      </p>
   </div>
</body>

</html>

Ridge Border Right Style

To have ridge right border, we use the ridge value. In the following example, ridge value has been used with the border-right-style property.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-none {
         border-right-style: ridge;
         border-right-color:black;
         border-right-width:6px;
         text-align: center;
         padding: 15px;
         margin: 8px;
      }

      h1 {
         background-color: lightgreen;
      }

      p {
         border: 6px solid silver;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-right-style property
   </h2>
   <div>
      <h1 class="border-none">
         This heading has 'ridge' right border style
      </h1>
      <p class="border-none">
         This border has 'ridge' right border style
      </p>
   </div>
</body>

</html>

Inset Border Right Style

To have an inset right border, we use the inset value. In the following example, inset value has been used with the border-right-style property.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-none {
         border-right-style: inset;
         border-right-color:black;
         border-right-width:6px;
         text-align: center;
         padding: 15px;
         margin: 8px;
      }

      h1 {
         background-color: lightgreen;
      }

      p {
         border: 6px solid silver;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-right-style property
   </h2>
   <div>
      <h1 class="border-none">
         This heading has 'inset' right border style
      </h1>
      <p class="border-none">
         This border has 'inset' right border style
      </p>
   </div>
</body>

</html>

Outset Border Right Style

To have an outset right border, we use the outset value. In the following example, outset value has been used with the border-right-style property.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-none {
         border-right-style: outset;
         border-right-color:black;
         border-right-width:6px;
         text-align: center;
         padding: 15px;
         margin: 8px;
      }

      h1 {
         background-color: lightgreen;
      }

      p {
         border: 6px solid silver;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-right-style property
   </h2>
   <div>
      <h1 class="border-none">
         This heading has 'outset' right border style
      </h1>
      <p class="border-none">
         This border has 'outset' right border style
      </p>
   </div>
</body>

</html>

Supported Browsers

Property
border-right-style	1.0	4.0	1.0	1.0	3.5

css_reference.htm

Print Page