CODEWITHSUNDEEP
htmlcss
Kenny
Kenny

Reputation: 79

How to leave gaps in straight sections of CSS border

I created my CSS code that works pretty well I want to have this same line going around my content within a div for a border but I only want all four corners nothing in-between here's what I have so far at this point I'm confused on how to pull this off

Here's what I'm trying to do

enter image description here

.Line
{
    border-bottom: 1px solid #b2b2b2;
    border-left: 1px solid #b2b2b2; 
    padding-top: 5px;
    padding-bottom: 5px;
    width: 65%;
    position: relative;
    border-bottom-left-radius: 10px;
    position: relative;
    /* left: -15px;
    top: -120px; */
    height: 100px;
}

.Line:before, .Line:after
{
    content: "";
    width: 8px;
    height: 8px;
    /*background: #b2b2b2;*/
    border: 2px solid #b2b2b2;
    border-radius: 5px;
    position: absolute;
    top: -3px;
}

.Line:before
{
    left: -6px;
    top: -10px;
}

.Line:after
{
    right: -10px;
    top: 105px !important;
}

.LineFullWidth
{
    border-bottom: 1px solid #b2b2b2;
    padding-top: 5px;
    padding-bottom: 5px;
    width: 95%;
    position: relative;
}

.LineFullWidth:before, .LineFullWidth:after
{
    content: "";
    width: 8px;
    height: 8px;
    background: #b2b2b2;
    border-radius: 5px;
    position: absolute;
    top: -3px;
}

.LineFullWidth:before
{
    left: -6px;
    top: 6px;
}

.LineFullWidth:after
{
    right: -7px;
    top: 6px !important;
}
<body>
<div class="Line">
<h2>CONTENT</h2>
</div>
</body>

Upvotes: 2

Views: 1090

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 105853

You may use the pseudo and add them box shadow to draw multiple borders.

A background may hide parts of line.

Works fine with plain background-colors.

Demo uses vw units just for demo purpose, you may use pixel units or whatever.

div {
  position:relative;
  border-radius:1em;
  background:
    linear-gradient(to top, transparent 30%, white 30%, white 70%, transparent 70%),linear-gradient(to left, transparent 30%, white 30%, white 70%, transparent 70%);
}
div:before {
  content:'';
  position:absolute;
  border-radius:1em;
  z-index:-1;/* draw it under */
  top:0;
  left:0;
  right:0;
  bottom:0;
  box-shadow:
    inset 0 0 0 1px, /* hide it with bg */
    0 0 0 1px lightgray /* see that one */;
}

/* draw circles */
h2:before {
  content:'';
  position:absolute;
  top:-4px;
  left:-4px;
  z-index:1;
  height:8px;
  width:8px;
  border-radius:100%;
  box-shadow:
    0       7vw  0 0 white,
    0       7vw  0 1px ,
    0       3vw  0  0 white ,
    0       3vw  0 1px ,
    50vw    7vw  0 0 white,
    50vw    7vw  0 1px ,
    50vw    3vw  0 0 white,
    50vw    3vw  0 1px ,
    15vw      0  0 0 white,
    15vw      0  0 1px,
    35vw      0  0 0 white,
    35vw      0  0 1px,
    15vw    10vw  0 0 white,
    15vw    10vw  0 1px,
    35vw    10vw  0 0 white,
    35vw    10vw  0 1px ;
}




/* DEMO purpose */
html {
  display:flex;
  min-height:100%;
}
body {
  margin:auto;
}

div:after {
  content:'';
  display:block;
  padding-top:10vw;
}

div {
  display:flex;
  align-items:center;
  justify-content:center;
  width:50vw;
}
<div>
<h2>CONTENT</h2>
</div>

SVG would surely do better ;)

Upvotes: 2

Related Questions