Html Question posted in
Some basic documentation can be found here.

Html – Have double border left and right css

I would like my double border with one line shorter than the other left and right.

the left is current only 1 line missing the smaller one

   .double-border {
  --b: 2px; /* thickness */
  --c: #3CD5AF;
  
  height: 100%;
  border-right: var(--b) solid var(--c);
  border-left: var(--b) solid var(--c);
  background: linear-gradient(var(--c) 0 0) right 10px bottom 0/var(--b) 50% no-repeat
}
 <div class="col-lg-8 double-border">
                            <h4>About the episode subhead lorem ipsum 1</h4>
                            <p>Nulla Lorem mollit cupidatat irure. Laborum magna nulla duis ullamco cillum dolor. Voluptate exercitation incididunt aliquip deserunt.</p>
                            <a hreff="">link</a></a>
                        </div>
Tags:

2

Answers


  1. 0

    Just use two background gradients.

    .double-border {
  --b: 2px;
  /* thickness */
  --c: #3CD5AF;
  height: 100%;
  border-right: var(--b) solid var(--c);
  border-left: var(--b) solid var(--c);
  background: 
  linear-gradient(var(--c) 0 0) left 10px bottom 0/var(--b) 50% no-repeat, 
  linear-gradient(var(--c) 0 0) right 10px bottom 0/var(--b) 50% no-repeat
}

div {
  padding: 0 2em;
}
    <div class="col-lg-8 double-border">
  <h4>About the episode subhead lorem ipsum 1</h4>
  <p>Nulla Lorem mollit cupidatat irure. Laborum magna nulla duis ullamco cillum dolor. Voluptate exercitation incididunt aliquip deserunt.</p>
  <a hreff="">link</a></a>
</div>
    Login or Signup to reply.
  2. 0 
      background: linear-gradient(var(--c) 0 0) right 10px bottom 0/var(--b) 50% no-repeat,
              linear-gradient(var(--c) 0 0) left 10px bottom 0/var(--b) 50% no-repeat

    You can add some padding on left and right sides because the text will overlap with the small borders.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search