Two different width borders on 3 sides

Question

I had this code to create a double border off different widths, but i need it to only show on the left,top and right sides. This is fine with the border property but not possible with outline as it doesn't share the same border-left etc

border: double 4px black;
outline: solid 3px black;

any help would be great

Answer 1

Why not remove the outline and instead create a nested element inside of the element?

You can do like this:

Create nested elements in HTML:

<div class="big">
        <div class="small">Some text Here.....</div>
</div>

Then apply CSS:

.big{
      border: 5px solid green;
      border-bottom: none;
    }
.small{
        border: 2px solid black;
        border-bottom: none;
        margin: 2px;
    }

No need to use the outline.