CODEWITHSUNDEEP
htmlcss
theonelucas
theonelucas

Reputation: 614

CSS - Border with a 90º curve at top

I'm creating a website that will looks like the GNU/Linux terminal. For that, I'm creating a blog page, which will have some boxes, where each box is a blog post. This is the boilerplate HTML code of each blog post:

<div class="post">
    <h3 class="post-title">Title</h3>
    <span class="post-content">
        The awesome content goes here.
    </span>
</div>

I would like to insert a border on each of these boxes, but instead of inserting a regular border, I would like to break on top and make a curve of 90º degrees around both sides of the title, like this:

Example image

Is that possible?

Upvotes: 0

Views: 143

Answers (1)

Dan Philip Bejoy
Dan Philip Bejoy

Reputation: 4376

I hope this is what you are looking for,

body {
  background: #ddd;
}

.wrap {
  width: 300px;
  height: 150px;
  padding: 20px;
  background: #fff;
  margin: 30px auto;
}

.post {
  position: relative;
  height: 100%;
  width: 100%;
  border: 3px solid black;
  background: #fff;
  padding: 40px;
  box-sizing: border-box;
}

.post h3 {
  position: absolute;
  top: -35px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  padding: 5px;
  border-left: 3px solid black;
  border-right: 3px solid black;
}
<div class="wrap">
  <div class="post">
    <h3 class="post-title">Title</h3>
    <span class="post-content">
        The awesome content goes here.
    </span>
  </div>
</div>

Upvotes: 2

Related Questions