CSS border-right-style Property - Playground Example

<!DOCTYPE html><html><head><style type="text/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; }
</style></head><body><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></body></html>