CSS border-right-style Property

Description

The border-right-style property specifies the visual pattern used to draw the right edge of an element’s border box. It governs whether the right border is painted and, if painted, what kind of line or pattern is rendered along that edge. Because it targets only the right side, it’s commonly used when you want asymmetric borders - for example, to emphasize a seam or divider between adjacent content without drawing a full rectangle around an element.

The final appearance of the right edge is the result of combining border-right-width, border-right-color, and border-right-style. If the width is zero or the style is one that suppresses painting, nothing will be visible regardless of color. Likewise, using the shorthand border-right allows you to set width, color, and style together for convenience; the per-side style here takes precedence for the right edge when both shorthand and longhand are applied.

You can also influence multiple sides at once using the shorthand border-style, which sets styles for all four edges; individual per-side declarations (like the right-side property) override these broader settings. From a layout and painting perspective, borders become part of the element’s box and can affect hit testing, visual stacking, and the perceived separation between elements. Borders are drawn outside the element’s padding and inside the margin area, so changing the right-side style can change the visual rhythm of inline and block layouts without altering content flow.

In the cascade, border-right-style behaves like other non-inherited box properties: it is applied according to origin, specificity, and source order, and can be reset or overridden by shorthands. Because style changes may be discrete (switching from one visual pattern to another), animating this property is not the same as animating numeric values; transitions may result in abrupt swaps rather than smooth interpolations. Use it alongside the matching width and color properties when you need precise control over the right-edge treatment of an element.

Definition

Initial value: none
Applies to: All elements
Inherited: No
Computed value: Specified value
Animatable: No
JavaScript syntax: object.style.borderRightStyle

Interactive Demo

border-right-style: none;

border-right-style: dotted;

border-right-style: dashed;

border-right-style: solid;

border-right-style: double;

border-right-style: groove;

border-right-style: inset;

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff. Somewhere, beyond the veil of dusk, a coyote laughed, echoing through the stillness like a forgotten memory.

Syntax

border-right-style: <line-style>

Values

noneBorder is not drawn, color and width are ignored. If the border is an image, the image layer counts but is not drawn.
hiddenSame as none, except in terms of conflict resolution of collapsed borders. Any element with a hidden border suppresses all shared borders at that location. Borders with a style of none have the lowest priority.
dottedA series of round dots.
dashedA series of square-ended dashes.
solidA single line segment.
doubleTwo parallel solid lines with some space between them.
grooveDisplays a border leading to a carved effect. It is the opposite of ridge.
ridgeLooks as if it were coming out of the canvas.
insetLooks as if the content on the inside of the border is sunken into the canvas.
outsetLooks as if the content on the inside of the border is coming out of the canvas.
inherit

Example

HTML

<div class="examples">

  <div class="box solid">

    <div class="label">solid</div>

  </div>

  <div class="box dashed">

    <div class="label">dashed</div>

  </div>

  <div class="box dotted">

    <div class="label">dotted</div>

  </div>

  <div class="box double">

    <div class="label">double</div>

  </div>

  <div class="box groove">

    <div class="label">groove</div>

  </div>

  <div class="box ridge">

    <div class="label">ridge</div>

  </div>

  <div class="box inset">

    <div class="label">inset</div>

  </div>

  <div class="box outset">

    <div class="label">outset</div>

  </div>

  <div class="box none">

    <div class="label">none</div>

  </div>

</div>

CSS

.examples {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px;
  background: #f6f8fa;
  font-family: Arial, Helvetica, sans-serif;
}

.box {
  width: 140px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-right-width: 6px;
  border-right-color: #2c3e50;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  border-radius: 6px;
}

.box .label {
  color: #2c3e50;
  font-weight: 600;
  text-transform: capitalize;
}

/* Different examples of border-right-style */
.box.solid  { border-right-style: solid; }
.box.dashed { border-right-style: dashed; }
.box.dotted { border-right-style: dotted; }
.box.double { border-right-style: double; }
.box.groove { border-right-style: groove; }
.box.ridge  { border-right-style: ridge; }
.box.inset  { border-right-style: inset; }
.box.outset { border-right-style: outset; }
.box.none   { border-right-style: none; }

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS border-right-style property. Hover over a browser icon to see the version that first introduced support for this CSS property.