How to enable double dotted border?

Question

When I type this:

   <style>
        .tavit{
            width:400px;
            height:300px;
            background-color:yellow;
            border:dashed; /*First I applied - border:dashed double (In order to get a double dashed border - but it didn't work for some reason*/
            border-style:double;
            margin:auto;
            font-size:medium;
            text-align:right;
        }
        .adom {
            color: red;
            font-size: xx-large;
            text-align: center;
        }
    </style>

nothing works. Like one or the other. What am I missing? Thanks

Answer 1

You can simply fix this one div, you can use the path and border, and then use the propertyoutline-offset

.test {
  background:white;
  padding:15px;
  border:1px dashed #000;
  outline:1px dashed #000;
  outline-offset:-5px;
}

<div class="test">see this</div>

Run codeHide result

Answer 2

You can create an outer and inner div and give a border to both of them.

div {
  border: 1px dashed black;
}

.outer {
  padding: 5px;
}

<div class="outer">
  <div class="inner">Long long long text</div>
</div>

Run codeHide result

Answer 3

No border-style as dashed double,
But the property border-style:doublegives two border, but as solidstrings, so you can use pseudo selectorand declare a border style: dotted on both, as shown below,

 .tavit {
   width: 400px;
   height: 300px;
   background-color: yellow;
   border: dashed;
   border-style: dashed;
   margin: auto;
   font-size: medium;
   text-align: right;
   position: relative;
 }
 
 .tavit:before {
   content: "";
   width: 94%;
   height: 280px;
   border-style: dashed;
   position: absolute;
   left: 2%;
   top: 8px;
 }

<div class="tavit">

</div>

Run codeHide result