JSFiddle - React, Tailwind, and code Playground

by Madalina Taina

HTML

<p class="p1">A dotted outline</p>
        <p class="p2">A dashed outline</p>
        <p class="p3">A solid outline</p>
        <p class="p4">A double outline</p>
        <p class="p5">A groove outline</p>
        <p class="p6">A ridge outline</p>
        <p class="p7">A inset outline</p>

CSS

p {
     border: 1px solid black;
     outline-color:blue;
     line-height:30px;
     }
     .p1{
        outline-style: dotted;
     }
      .p2{
        outline-style: dashed;
     }
      .p3{
        outline-style: solid;
     }
      .p4{
        outline-style: double;
     }
      .p5{
        outline-style: groove;
     }
      .p6{
        outline-style: ridge;
     }
      .p7{
        outline-style: inset;
     }