Designing rounded corner rectangles in CSS

Question

I'm designing a schedule for a company that will have multiple rectangles stacked vertically going down, but I have no idea how to modify the properties of a rectangle since I'm really not good at designing custom shapes in CSS. I was able to do a rectangle with just a border right here.

Here is the CSS that I used to draw a rectangle:

#box {
    border:10px solid #000;
    border-radius: 10px 40px 40px 10px;
    width: 200px;
    height: 100px;
    background-color:#ccc;
}

So far, I have a base, but I have no idea how to design the custom rectangle with a disappearing section on the border lines and another line going down. In the end, I want it to look like this:

Can anyone help me out design even 2 of these custom rectangle using CSS. I would really appreciate it as I can continue designing with a base custom rectangle. Thanks guys!

Answer 1

Here I've made a page as per the image you placed here. Check the Demo.

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

p:after{
 position:absolute;
 content: " ";
   width:50px;
    height:50px;
  border-right:10px solid #000;
  right:18px;
  bottom:-55px;
  }
p:last-child:after{border-right:0;}

/HTML code will be like this/

<div id="box">
<p><span>Title will come here</span>so far, I have a base, but I have no idea how to customly design the rectangle with dissapearing section on the border lines and another line going down, the way I want it like this:</p>
         <p><span>Title will come here</span>so far, I have a base, but I have no idea how to customly design the rectangle with dissapearing section on the border lines and another line going down, the way I want it like this:</p>
         <p>><span>Title will come here</span>so far, I have a base, but I have no idea how to customly design the rectangle with dissapearing section on the border lines and another line going down, the way I want it like this:</p>
 </div>

Answer 2

How about this: place a div behind the other three in front and give it a border -right property. Then give the other three z-indexes of higher than 1. Finally Give the titles of each of the three boxes a zindex higher than the last one. Also try not to give the boxes height, but padding instead, this way the lettering will never overflow the box. Here is some of the css (will need tweaking):

   /*the container behind the boxes*/
   #cont{background-color:transparent;
         height:/*whatever height*/;
         width:/*whatever width*/;
         border-right:5px solid black;}



   #box{
        background-color:white;
        border-radius: 10px;
        position:relative;
        z-index:2;
    }

   #time{
    position:relative;
    z-index:3;
    }

This is the easiest way... If you don't understand this, then do some tutorials! it will help you greatly! HAVE A GOODER ;) Work in editfy with a live preview!

Answer 3

what you need something like this ???

Html

<div id="box">
    <h1>title goes here</h1>
    <p>Hello</p>
</div>

css

#box{
    border:10px solid #000;
    border-radius: 20px;
    width: 200px;
    height: 100px;
    background-color:#fff;
}
h1 {
    font-size: 20px;
    background: #fff;
    position: relative;
    top: -30px;
    right: -10px;
    display: inline-block;
}

demo

EDIT

for your second issue, you can do something like this without using images,

DEMO