JSFiddle - React, Tailwind, and code Playground

weird border values

by nilloc

HAML

.dotted
.dotted.a
.dotted.b

SCSS

div {
  position: absolute;
  display: inline-block;
  top: 20px;
  left: 20px;
  box-sizing: border-box;
  font-family: helvetica;
  font-size: 10px;
}

.dotted{
  border:8px dotted red;
  border-style: dotted groove dotted ridge;
  top:100px;
  left:100px;
  width:100px;
  height:100px;
  border-radius:10px;
}

.dotted.a{
  border-style: inset;
  left:220px;
}

.dotted.b{
  border-style: outset;
  left:340px;
}