title: Designing rounded corner rectangles in CSS
body: <p>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 <a href="http://jsfiddle.net/qnGKj/747/" rel="nofollow noreferrer">here</a>.</p>
  
  <p>Here is the CSS that I used to draw a rectangle:</p>
  
  <pre><code>#box {
      border:10px solid #000;
      border-radius: 10px 40px 40px 10px;
      width: 200px;
      height: 100px;
      background-color:#ccc;
  }
  </code></pre>
  
  <p>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:</p>
  
  <p><img src="https://i.stack.imgur.com/tdBEh.png" alt="enter image description here"></p>
  
  <p>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!</p>