Placing half border(in the center hidden at the corners) around a div-CodePudding

I want to have a border such that it is shown only at the bottom and appears in center only and hidden around the corners: This is what I have implemented till now :

      .bd{
        border-bottom:1px solid black;
        position: relative;
      }
      .bd:after{
        content: "";
        width:25%;
        height:1.1px;
        background-color:white;
        position: absolute;
        right:0;
        bottom:-1px;
      }

<div >Example</div>

What I have been able to achieve with this is I have a border which does not appear at right corner but does appear around left corner and I want to hide it from there as well. I am not able to achieve that

CodePudding user response：

Use a gradient for the line:

h3 {
        text-align: center;
    }
    .line {
       height: 2px;
        background-image: linear-gradient(to right, white , black, white);
    }
h4 {
    border-bottom: 2px solid;
    border-image-slice: 1;
    border-width: 2px;
    border-image-source: linear-gradient(to left, #fff, #000, #fff);
    text-align: center;
}

<h3>Heading</h3>   
<div ></div>
<h4>Heading</h4>

CodePudding user response：

You can make a pseudo box that is the same height as its real counterpart, but is less wide with some absolute positioning (but the base of the positioning is the original element).

h4 { position: relative; }

h4:before {
  /* change these to change the size of the border */
  left: 25%;
  right: 25%;
  
  /* change this to change the border itself */
  border-bottom: 1px solid red;
  
  /* */
  position: absolute;
  display: block;
  content: '';
  top: 0;
  bottom: 0;
}

<h4>Text</h4>

CodePudding user response：

You could just put the border in as an image (a linear-gradient which just has the middle bit as black).

.bd {
  border-bottom: 1px solid black;
  border-image: linear-gradient(to right, transparent 0 25%, black 25% 75%, transparent 75% 100%) 1 / 0 0 1px 0;
}

<div >Example</div>