title: Multi-line rounded corners with border radius
body: <p>I am trying to give a span with a background a border radius. It works fine without word-wrap. But when there is word-wrap, it looks something like this:</p>
  
  <p><img src="https://i.stack.imgur.com/KwwLJ.png" alt="enter image description here"></p>
  
  <p>As you can guess, I only need the edges to be rounded (except from the top left edge). I don't think I can do it with border-radius property and I have no clue how can I do this.</p>
  
  <p>Any idea ?
  Thanks.</p>
  
  <p><strong>edit</strong>: The Codes</p>
  
  <pre><code>.messageTextCont {
    margin-left: 5px;
    word-break: break-word;
  }
  .messageText {
    font-size: 17px;
    font-weight: 300;
    color: #FBFDFE;
    background-color: #402060;
    padding: 0px;
    box-shadow: 5px 0 0 #402060, -5px 0 0 #402060;
    line-height: 23px;
    -moz-border-bottom-left-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    border-bottom-left-radius: 5px;
    -moz-border-bottom-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    border-bottom-right-radius: 5px;
    -moz-border-top-right-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    border-top-right-radius: 5px;
  }
  </code></pre>
  
  <p><strong>edit2</strong>: I'm also OK with js solutions</p>
  
  <p><strong>edit3</strong> : I get so close to what I want by including this :</p>
  
  <pre><code>-webkit-box-decoration-break: clone;
  -o-box-decoration-break: clone;
  box-decoration-break: clone;
  </code></pre>
  
  <p>What this does is, it clones the styles on the first line, and applies them to the second line in case of a word-break. But the problem is as follows :</p>
  
  <p><img src="https://i.stack.imgur.com/qYfym.png" alt="enter image description here"></p>
  
  <p>Now it exactly clones the properties of the first line and applies them to the second, making the top left and top right corner also rounded, which they should not be. To cover that up, I made the lines overlap a little bit and I got the result but now some of the letters are also overlapping. The problem is solved if I find a solution to the overlapping letters issue instead of this.</p>
  
  <p><strong>edit4</strong> : I used box shadows :</p>
  
  <pre><code>box-shadow: 5px 0 0 #402060, -5px 0 0 #402061, -5px -3px 0 orange, 5px -3px red;
  </code></pre>
  
  <p>To cover up the unwanted gaps. Now the result is like this : </p>
  
  <p><img src="https://i.stack.imgur.com/s36HI.png" alt="enter image description here"></p>
  
  <p>The only problem I have now is that the below line overlaps the upper line. If there is some way that the upper line overlaps the bottom line, than problem solved. </p>