CODEWITHSUNDEEP
htmlcsselementshapes
fou
fou

Reputation: 27

How to add a rounded cap shape to rectangle element CSS

I need again help about create rounded caps on my element that have a gap.

I want to do something like this : [rectange with gap and round cap][1] [1]: https://i.sstatic.net/O781h.png

After some research and trying, I ended up doing this (e.g my code). I'm happy with it, but I'd like to create more aesthetic rounded caps like in my exemple. Can anyone help me, thank you in advance.

span {
    font-size: 20px;
    background: #fff;
  position:absolute;
    top: -20px;
    right: 10px;
    left: 10px;
  padding:4px;
}
p{
  border-radius: 25px;
    width: 250px;
    height: 150px;
   border:10px solid #000;
    background-color:white;
  position:relative;
  padding-top:15px;
 
}
<body class="container">
    <!--///////////////////////////////// début header//////////////////////////// -->
    <div id="box">
        <p><span>Title will come here</span></p>
    </div>

</body>

Upvotes: 0

Views: 261

Answers (1)

Justin
Justin

Reputation: 2958

You can add some cricles to the ends of the lines. It may need slight adjusting.

span {
  font-size: 20px;
  background: #fff;
  position: absolute;
  top: -20px;
  right: 10px;
  left: 10px;
  padding: 4px;
}
p {
  border-radius: 25px;
  width: 250px;
  height: 150px;
  border: 10px solid #000;
  background-color: white;
  position: relative;
  padding-top: 15px;
}

p::after {
  content: "";
  position: absolute;
  top: -9.3px;
  left: 5px;
  width: 10px;
  height: 10px;
  background: black;
  border-radius: 50%;
  z-index: 1;
}

p::before {
  content: "";
  position: absolute;
  top: -9.3px;
  left: 235px;
  width: 10px;
  height: 10px;
  background: black;
  border-radius: 50%;
  z-index: 1;
}
<body class="container">
    <!--///////////////////////////////// début header//////////////////////////// -->
    <div id="box">
      <span id="cap"></span>
        <p><span>Title will come here</span></p>
    </div>

</body>

Upvotes: 1

Related Questions