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.

Mush

Pretty sure that this is not possible with pure CSS – Mazzard

can you show the code, which you tried so far? – H

Nope, CSS Can't detect content. You would, I suspect, need JS to determine where the line break is and wrap an extra span in there. – Mazzard

@H I included the codes. thanks :) – Mush

Not possible with current technology - might be possible within the near future – Smitten

@Mazzard Sure, JS solutions are also accepted. Thx – Mush

So you want top right, bottom left and bottom right corners rounded? – Upwards

@chipChocolate.py and also top right and bottom right of that extension part – Mush

Might help others if you supplied a mockup of your desired styling. – Rhotacism

What if the text is more than 2 lines? – Upwards

Your fiddle is perfect +1 for the pure css solution (Y) I would suggest to add that as answer with its code and make it accepted answer. – Greysun

@ZiaUlRehmanMughal Good call! Thx – Mush

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/

Mush

Answer 2

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

JSFiddle

Anadem

Answer 3

The stuff you have to do to get this done is way too much for this simple effect. But just in order to answer your question heres one way to do it:

You need to detect line wraps, and then insert a new <span>. So you're creating a second span for the second line. A third, for the third line and so on.

To detect line wraps, you need to split the text at all spaces, remove the text, re-add word by word while checking the parents height. If the height increases, you have a linewrap.

Here is a quick and dirty JavaScript solution using jQuery

var textContainer = $('span');

textContainer.each(function(){
    var current = $(this);
    var text = current.text();

    var words = text.split(' ');

    current.text(words[0]);
    var height = current.height();

    // loop through text
    for(var i = 1; i < words.length; i++){
        // save current text
        var origText = current.text();
        // insert new word
        current.text(current.text() + ' ' + words[i]);

        // height increased?
        if(current.height() > height){
            // remove just inserted word to NOT line break
            current.text(origText);
            // insert linebreak and new span
            var linebreak = $('<br />').insertAfter(current);
            current = $('<span>').insertAfter(linebreak);
            // put the removed word into the new span
            current.text(current.text() + ' ' + words[i]);
        }
    }
});

Part of the code is from this Source, which I modified to fit your needs.

See in in action here on JSFiddle

Please note: this is really quick and dirty. You can and should optimize this code for performance, in case you use this a lot.

Craddock