Multi-line rounded corners with border radius

Question

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:

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.

Any idea ? Thanks.

edit: The Codes

.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;
}

edit2: I'm also OK with js solutions

edit3 : I get so close to what I want by including this :

-webkit-box-decoration-break: clone;
-o-box-decoration-break: clone;
box-decoration-break: clone;

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 :

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.

edit4 : I used box shadows :

box-shadow: 5px 0 0 #402060, -5px 0 0 #402061, -5px -3px 0 orange, 5px -3px red;

To cover up the unwanted gaps. Now the result is like this :

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.

Answer 1

[SOLVED] : My solution looks like this:

.messageText {
  font-size: 17px;
  font-weight: 300;
  color: #FBFDFE;
  background-color: #402060;
  padding: 0px;
  box-shadow: 5px 0 0 #402060, -5px 0 0 #402061, 5px 5px 0 #402060, -5px 5px #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;
  -webkit-box-decoration-break: clone;
  -o-box-decoration-break: clone;
  box-decoration-break: clone;
}

Here is the jsFiddle:

http://jsfiddle.net/vpo2x84s/3/

Answer 2

It can be done by adding box-decoration-break: clone;

JSFiddle