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

Why not remove the outline and instead create a nested element inside of the element you already have with the second border style you want? — Bob Dole, Apr 09 '19 at 18:28

score 5 · Accepted Answer · answered Apr 09 '19 at 19:08

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.

score 2 · Answer 2 · answered Apr 09 '19 at 19:05

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>&nbsp;</div>

score 0 · Answer 3 · answered Apr 09 '19 at 18:46

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}

score 0 · Answer 4 · answered Apr 09 '19 at 19:33

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>

Vladimir Rodichev · Answer 5 · 2019-04-09T20:16:48.003

.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>

Two different width borders on 3 sides

5 Answers5