Incomplete borders around div

Question

I am looking for a way to create an incomplete square with borders with some text and a background with pure css. Here is what I am trying to achieve:

My initial idea is to create the shape based on three shapes and then colorize the borders accordingly:

Approach to create incomplet borders around div

But I am a bit concerned about the adaptive version - scaling three shapes. So maybe a better idea, anyone?

Your initial idea is correct. Actually, if you go to my website www.joeltbennett.com, you can see I've used a similar method to draw dotted lines — Joel, Jan 27 '16 at 06:50
Not an exact duplicate but you would get the idea from this thread - http://stackoverflow.com/questions/31205386/how-to-add-border-to-a-container-with-transparent-gaps-in-between — Harry, Jan 27 '16 at 06:50
looking at the expected image. you don't required to have incomplete square. actually you need to have 2 images. one image is person with hair. one more two buttons and content block. you can achieve this with z-index — Venkat.R, Jan 27 '16 at 06:50
If you view the divs in webmaster tools or done such thing, you can see what happens when it scales down to mobile size — Joel, Jan 27 '16 at 06:51

Krish · Answer 1 · 2016-01-28T05:11:53.650

25

You can do with css pseudo ::after and ::before , something like this

.incomplete-box{
  border: solid 1px #fff;
  border-right: none;
  width: 100px;
  height: auto;
  position: relative;
}
.incomplete-box::after,
.incomplete-box::before{
  content: '';
  position: absolute;
  height: 30%;
  width: 1px;
  background-color: #fff;
  right: 0;
}
.incomplete-box::after{
  top: 0;
}
.incomplete-box::before{
  bottom: 0;
}

Demo

Fixed width and height : https://jsfiddle.net/nikhilvkd/qt5ne3yw/

Auto width and height: https://jsfiddle.net/nikhilvkd/0v3k8rv8/2/

edited Jan 28 '16 at 05:11

answered Jan 27 '16 at 06:54

Krish

1,884
2
16
40

nice one. but this is fixed height and width, look at forked one - https://jsfiddle.net/ramsunvtech/0v3k8rv8/ – Venkat.R Jan 27 '16 at 06:57
you can make height and width as auto , check your updated fiddle https://jsfiddle.net/nikhilvkd/0v3k8rv8/1/ – Krish Jan 27 '16 at 06:58

Nenad Vracar · Answer 2 · 2016-01-27T13:56:41.867

You can do this with :before and :after pseudo elements

Complete design Fiddle

.square {
  width: 200px;
  height: 300px;
  border-left: 1px solid gray;
  border-bottom: 1px solid gray;
  border-top: 1px solid gray;
  position: relative;
}

.square:before, .square:after {
  content: "";
  height: 20%;
  position: absolute;
  right: 0;
  border-right: 1px solid gray;
}

.square:before {
  bottom: 0;
}

<div class="square"></div>

or SVG

line {
  stroke: #6996FB; 
  stroke-width: 2;
}

svg {
  overflow: visible;
}

button {
  padding: 10px 50px;
  border: none;
  color: white;
  margin-right: 10px;
  margin-top: 15px;
}

.btn-blue {
  background: #5D8CFF;
}

.btn-green {
  background: #33F1D9;
}

h3 {
  margin: 0;
}

<svg width="250" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <line x1="1" y1="1" x2="250" y2="1"></line>
    <line x1="0" y1="300" x2="250" y2="300"></line>
    <line x1="1" y1="1" x2="1" y2="300"></line>
    <line x1="249" y1="0" x2="249" y2="70"></line>
    <line x1="249" y1="230" x2="249" y2="300"></line>
    
    <foreignobject x="60" y="90" width="400" height="180">
      <body xmlns="http://www.w3.org/1999/xhtml">
        <h3>Lorem ipsum dolor sit <br> amet, consectetur adipisicing  elit. Suscipit</h3>
        <button class="btn-blue">Btn 1</button><button class="btn-green">Btn 2</button>
      </body>
    </foreignobject>
    
</svg>

web-tiki · Accepted Answer · 2016-01-27T12:52:24.300

This approach allows you to:

add any content and the borders will adapt around it regardless of height or width of the content
support transparent background and can be displayed over an image or non plain colors
doesn't add any unsemantic elements

It relies on 2 absolutely positioned pseudo elements and one div. The spacing between the content and the borders is controlled by the padding on the div :

div{
  position:relative;
  display:inline-block;
  padding:50px 100px;
  border-left:1px solid #000;
  text-align:center;
}
div:before, div:after{
  content:'';
  position:absolute;
  right:50%; left:0;
  height:50px;
  border-right:1px solid #000;
}
div:before{
  top:0;
  border-top:1px solid #000;
}
div:after{
  bottom:0;
  border-bottom:1px solid #000;
}
body{background:url('http://i.imgur.com/3IXm5qm.jpg');background-size:cover;}

<div>
  <h2>This is a very long title on<br/> 2 lines</h2>
  <button>Button</button>
  <p>Some text</p>
</div>

although I received a bunch of nice answers, I'm going to pick this one as the most versatile. — The Whiz of Oz, Jan 29 '16 at 07:02
Almost forgot - you can see your answer in action here: http://www.novadentspb.ru — The Whiz of Oz, Jun 26 '16 at 18:00

Jinu Kurian · Answer 4 · 2017-10-10T06:44:39.830

Well, go with the above answers, I recommend using pseudo elements to achieve this effect.

But There is another way to accomplish this without using pseudo-elements.

Here is how you should do this.

.row{display:table;table-layout:fixed;}
    .col{display:table-cell;}
    
    .row{width:250px; margin: auto;}
    .mid.row > .col{ height: 100px; }
    
    .col{ text-align: center;}
    .top.col, .bottom.col{
      border-top: 1px solid black;
      border-left: 1px solid black;
      border-right: 1px solid black;
      height: 50px;
    }
   .bottom.col{
     border-top: 0;
     border-bottom: 1px solid black;
   }
    .mid.row > .col{
      border-left: 1px solid black;
      border-right: 0;
      vertical-align: middle;
      text-align: right;
    }
   .mid.row > .col span{
      margin-right: -30px;
     max-width: 300px;
    }

<div class="row">
  <div class="top col"></div>
</div>
<div class="mid row">
  <div class="col">
    <span>Hey you can achieve this without using pseudo elements :)</span>
  </div>
</div>
<div class="row">
  <div class="bottom col"></div>
</div>

Appreciate your way even it is bit complicated :) – Krish Jan 27 '16 at 09:06 — Krish, Jan 27 '16 at 09:06
@Krish Thanks. just thought of alternate way to do this :) – Jinu Kurian Jan 27 '16 at 09:17 — Jinu Kurian, Jan 27 '16 at 09:17

doğukan · Answer 5 · 2020-07-26T10:37:46.547

We can do this with linear-gradients. No SVG, no pseudo-element. I used some variables to control everything easily.

.container {
  /* you can change these variables */
  --border-color: #000;
  --border-width: 2px;
  --space: 100px;
  
  width: 200px;
  height: 300px;
  position: relative;

  background: linear-gradient(var(--border-color), var(--border-color)) 0 0/var(--border-width) 100%, 
              linear-gradient(var(--border-color), var(--border-color)) 0 100%/100% var(--border-width), linear-gradient(var(--border-color), var(--border-color)) 0 0/100% var(--border-width), 
              linear-gradient(var(--border-color), var(--border-color)) 100% 0/var(--border-width) calc(50% - (var(--space) / 2)), 
              linear-gradient(var(--border-color), var(--border-color)) 100% 100%/var(--border-width) calc(50% - (var(--space) / 2));
  background-repeat: no-repeat;
}

.content {
  position: absolute;
  width: 200px;
  top: 50%;
  transform: translateY(-50%);
  right: -100px;
  background: yellow;
}

<div class="container">
  <div class="content">
    Lorem ipsum dolor sit, amet consectetur adipisicing elit.
  </div>
</div>

Incomplete borders around div

5 Answers5

Linked