How to make a custom CSS border with border-image? - css

Question

I am trying but failing miserably on trying to make a custom css border like this using the border-image shorthand property.Is there a way to do partial borders? Maybe there is a better way to achieve what I am trying to do? I could always just insert this image but it doesn't seem like this would resize well once you do that.

Answer 1

We can also achieve this by directly positioning the content inside the container as below.
Here we have positioned the content using margin, we can also do this by absolutely positioning the content.
.container {
border: 5px solid #000;
border-bottom: 0;
height: 10px;
margin-top: 15px;
}
.content {
background: #fff;
text-align: center;
border-left: 5px solid #000;
border-right: 5px solid #000;
height: 25px;
line-height: 25px;
width: 150px;
margin: -15px auto 0; /* height 25px + 5px border = 30/2 = 15 */
}
<div class="container">
<div class="content">Header</div>
</div>

Answer 2

Here is a responsive solution with less of code and with transparency:
.container {
text-align: center;
overflow: hidden;
border:5px solid;
border-image:linear-gradient(to bottom,transparent 10px,#000 10px,#000 100%) 4;
height:50px;
margin:5px;
}
.top {
display: inline-block;
position: relative;
padding: 0 10px;
}
.top::before,
.top::after {
content: "";
position: absolute;
top: calc(50% - 8px);
width: 100vw;
height: 15px;
padding: 5px 0;
box-sizing: border-box;
background: #000 content-box;
}
.top::before {
right: 100%;
border-right: 5px solid;
}
.top::after {
left: 100%;
border-left: 5px solid;
}
body {
background:pink;
}
<div class="container">
<div class="top">Hello</div>
</div>
<div class="container">
<div class="top">More Hello</div>
</div>
<div class="container">
<div class="top">H</div>
</div>

Answer 3

You can use display:flex to wrap and "play" with border to div inside wrap
.wrap{
display:flex;
width:100%;
}
.wrap div{
width:calc(100vw / 3);
}
.header{
text-align: center;
border-right: 5px solid black;
border-left: 5px solid black;
}
.border{
margin-top: 5px;
height:8px;
border-top: 5px solid black;
}
.b-left{
border-left: 5px solid black;
}
.b-right{
border-right: 5px solid black;
}
<div class="wrap">
<div class="border b-left"></div>
<div class="header">Header</div>
<div class="border b-right"></div>
</div>