'Need CSS help for top broken border line

I have tried to make this border box styling work in several different ways but have been unable to achieve it. I have figured out how to create a gap in the border, but it shows on top and bottom and I only want it on the top. Any help would be much appreciated.

Here is the a screenshot of what I am going for.

enter image description here

Here is my HTML:

<div>
    <blockquote>
    </blockquote>
</div>

Here is my CSS:

* {

box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
  background-position: bottom center;
}

div {
  width: 33%;
  height: 60%;
  background: white;
  margin: 25px auto;
  color: #007732;
  position: relative;
}

blockquote {
  width: 100%;
  height: 100%;
}

div::after, div:before,
blockquote::after, blockquote:before{
  content: '';
  position: absolute;
  width: calc(40% - 20px);
  height: calc(60% - 0px);
  border:2px solid transparent;
}

div::before { /* top left */
  top:10px;
  left:10px;
  border-top-color: #007732;
  border-left-color:#007732;
}

div::after { /* top right */
  top:10px;
  right:10px;
  border-top-color: #007732;
  border-right-color: #007732;
}

blockquote::before { /* bottom left */
  bottom:10px;
  left:10px;
  border-bottom-color: #007732;
  border-left-color:#007732;
}

blockquote::after { /* bottom right */
  bottom:10px;
  right:10px;
  border-bottom-color: #007732;
  border-right-color: #007732;
}
css


Solution 1:[1]

I believe you're looking at it "backwards."

Think of it in layers: the back layer is the border, there's no break in the border. The front layer is the image.

The image is just sitting on top of the border.

Unless you're trying to do it with a background image but I wouldn't advise that anyway.

<div>
  <img src="//placekitten.com/200/200" alt="kitten">
<blockquote>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
</blockquote>
</div>

css:

div {
  width: 500px;
  height: 500px;
  border: 10px solid orange;
  margin-top: 100px;
  font-size: 2em
}
div img {
  display: block;
  margin: auto;
  border-radius: 250px;
  margin-top: -100px;
}

Here's a quick pen: https://codepen.io/christopherpenny/pen/xxpbJWv

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 senecaTheMeek

Related Questions