solid border displaying as double depending on size of browser window-CodePudding

I have a header with a border on the left and right side of it and for some reason, depending on the width of my browser window, the border switches from solid to double. When I inspect the element, the css shows that it is still 'solid' but it displays as double. When changing the style to any other border-style, it appears as a double border.

border issue

.line-header {
  padding-bottom: 50px;
  font-size: 32px;
}

.line {
  display: flex;
  align-items: center;
  text-align: center;
  flex-grow: 1;
  width: fit-content;
}

.line::before,
.line::after {
  content: '';
  flex: 1;
  /* border-bottom: 1px solid #000; */
}

.line::before {
  border-width: 1px;
  border-style: solid;
  border-image: linear-gradient( to left, black, white) 1 0%;
}

.line::after {
  border-width: 1px;
  border-style: solid;
  border-image: linear-gradient( to right, black, white) 1 0%;
}

.line:not(:empty)::before {
  margin-right: .5em;
  /* adjusts left margin between line and text */
}

.line:not(:empty)::after {
  margin-left: .5em;
  /* adjusts right margin between line and text */
}

<div >
  <div >
    <div >AIR CHECKS</div>
  </div>
</div>

<div >
  <div >
    <audio src="" controls id="audioPlayer">
                          Sorry, your browser doesn't support HTML5!
                     </audio>
    <br>
    <div  role="group">
      <button type="button"  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                               Air Checks<span ></span>
                          </button>
      <ul  id="playlist">

      </ul>
    </div>
    <script src="assets/audioPlayer.js"></script>
  </div>
</div>

<div >
  <div >
    <div >RECAP IMAGES</div>
  </div>
</div>

CodePudding user response：

Instead of using border-width: 1px, use border-bottom-width: 1px, and dito for all the other border styles. The problem was that it was creating a top and a bottom border, hence the apparent "double border".

.line-header {
padding-bottom: 50px;
font-size: 32px; 
display: flex;
}

.line {
    display: flex;
    align-items: center;
    text-align: center;
    flex-grow:1;
    width: fit-content;
}

.line::before,
.line::after {
    content: '';
    flex: 1;
    /* border-bottom: 1px solid #000; */
}

.line::before {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-image: linear-gradient( to left, black, white ) 1 0%;
}

.line::after {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-image: linear-gradient( to right, black, white ) 1 0%;
}

.line:not(:empty)::before {
    margin-right: .5em; /* adjusts left margin between line and text */
  }

<div >
            <div >
                <div >AIR CHECKS</div>
            </div>
        </div>
    
        <div >
            <div >
                 <audio src="" controls id="audioPlayer" >
                      Sorry, your browser doesn't support HTML5!
                 </audio>
                 <br>
                 <div  role="group">
                      <button type="button"  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                           Air Checks<span ></span>
                      </button>
                      <ul  id="playlist">
                
                      </ul>
                   </div>
                  <script src="assets/audioPlayer.js"></script>
           </div>
    </div>

<div >
     <div >
          <div >RECAP IMAGES</div>
      </div>
</div>