CODEWITHSUNDEEP
htmlcss
user7910922
user7910922

Reputation:

How to enable a double dashed border?

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 it's even one or the other. What am I missing? Thanks

Upvotes: 6

Views: 9997

Answers (4)

Awasthi Adda
Awasthi Adda

Reputation: 11

.border 
{
  position: relative;
  border: 3px dashed black;
}
.border::before 
{
  content: "";
  position: absolute;
  top: -6px;
  left: -6px;
  right: -6px;
  bottom: -6px;
  border: 3px dashed red;
}

Upvotes: 1

frnt
frnt

Reputation: 8795

There is no border-style as dashed double,
But border-style:double property give two border but as solid lines, so you can use pseudo selector and declare border-style:dashed on both as 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>

Upvotes: 2

Jishnu V S
Jishnu V S

Reputation: 8407

You can simply fix this with one div, you can use outline and border, then use outline-offset property

.test {
  background:white;
  padding:15px;
  border:1px dashed #000;
  outline:1px dashed #000;
  outline-offset:-5px;
}
<div class="test">see this</div>

Upvotes: 17

athi
athi

Reputation: 1683

You can create an outer and inner div and can give 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>

Upvotes: 1

Related Questions