Two different width borders on 3 sides - html

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.

Answer 2

You can use box-shadow instead of outline - see demo below:
div {
line-height: 20px;
border-color: black;
border-style: double;
border-width: 4px 4px 0 4px;
box-shadow: -3px 0 0 0 black, /* left */
3px 0 0 0 black, /* right */
3px -3px 0 0 black, /* top */
-3px -3px 0 0 black; /* top */
}
<div> </div>

Answer 3

Create nested elements with their own id's
<div id="outer-border">
<div id="inner-border"></div>
</div>
Then set the correct CSS properties for those elements, for example something like:
#outer-border{border-bottom: none}
#inner-border{border-bottom: none}

Answer 4

Here is an idea using gradient to create the second border.
.box {
width: 200px;
height: 200px;
border: solid 2px red;
border-bottom:none;
padding:3px; /*control the distance between border*/
padding-bottom:0;
background:
linear-gradient(green,green) top /100% 4px,
linear-gradient(green,green) left /4px 100%,
linear-gradient(green,green) right/4px 100%;
background-repeat:no-repeat;
background-origin:content-box;
}
<div class="box">
</div>
Another idea using pseudo element:
.box {
width: 200px;
height: 200px;
border: solid 2px red;
border-bottom:none;
position:relative;
}
.box:before {
content:"";
position:absolute;
top:3px;
left:3px;
right:3px;
bottom:0;
border: solid 4px green;
border-bottom:none;
}
<div class="box">
</div>

Answer 5

.st1, .st2 {
background-color: yellow;
}
.st1 {
outline: solid 3px black;
width: 400px;
height: 200px;
position: relative;
}
.st2 {
border-left-color: black;
border-left-style: double;
border-left-width: 4px;
border-top-color: black;
border-top-style: double;
border-top-width: 4px;
border-right-color: black;
border-right-style: double;
border-right-width: 4px;
position: absolute;
left: -1px;
right: -1px;
top: -1px;
bottom: -3px;
}
<div class="st1"><div class="st2"></div></div>
or
.st1, .st2 {
background-color: yellow;
}
.st1 {
border: 3px solid black;
border-bottom: none;
width: 400px;
height: 200px;
position: relative;
box-sizing: border-box;
}
.st2 {
border: 1px solid black;
border-bottom: none;
margin-top: 2px;
margin-right: 2px;
margin-left: 2px;
margin-bottom: 0px;
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
}
<div class="st1"><div class="st2">test</div></div>