CSS3 Inverted Rounded Corner

Question

Is there a way to do an inverted rounded corner in CSS3, something approximately like the bottom left corner in the (crude) drawing below?

/-------\
|       |
|       |
|       |
| ______/
|/ <---The left side is flush (straight), the slant should be rounded

Perhaps border-radius could be combined with this technique?

Edit: I'm not looking for a speech bubble, but rather just a way to curve the right side of the point on the bottom left.

Answer 1

Well, this is pure madness, but certainly there are ways to achieve this :-) not cross-browserly, but let's see:

Our mark-up:

<div id="bubble">
    <p>This is madness!</p>
</div>

Our CSS:

#bubble {
    width:200px;
    height:100px;
    border:1px solid #000;
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
    border-radius:20px;
}
    #bubble p {
        margin: 1em;
        font-family:Comic Sans MS;/* well, madness it is! */
    }
#bubble:before {
    content:'';
    border:20px solid;
    border-color:#fff transparent transparent;
    position:absolute;
    top:110px;
    left:25px;
    z-index:2;
}
#bubble:after {
    content:'';
    border:20px solid;
    border-color:#000 transparent transparent;
    position:absolute;
    top:111px;
    left:25px;
    z-index:1;
}

The result: http://jsfiddle.net/MrLWY/

I have only tested this in Firefox 3.6.3, but the idea is clear :-)

Here is take two:

#bubble {
    width:200px;
    height:100px;
    border:1px solid #000;
    position:relative;
    -webkit-border-radius:20px 20px 20px 0;
    -moz-border-radius:20px 20px 20px 0;
    border-radius:20px 20px 20px 0;
}
    #bubble p {
        margin: 1em;
        font-family:Comic Sans MS;
    }
#bubble:before {
    content:'';
    width:20px;
    height:20px;
    background:#fff;
    border-left:1px solid #000;
    position:absolute;
    top:100px;
    left:-1px;
}
#bubble:after {
    content:'';
    -webkit-border-radius:20px 0 0 0;
    -moz-border-radius:20px 0 0 0;
    border-radius:20px 0 0 0;
    border:solid #000;
    border-width:1px 0 0 1px;
    width:20px;
    height:19px;
    position:absolute;
    top:100px;
    left:0;
}

And the result: http://jsfiddle.net/ajeN7/

Perhaps this can be enhanced in many ways:

• make it cross-browser (+webkit and opera, at least)
• it could work in IEs, without roundings, though, with help of something like that http://code.google.com/p/ie7-js/ (in order for generated content to work).
• to find out how it could work with flexible height.
• to change the font-family declaration :-)

Answer 2

I cant comment yet, but so here's a new answer (in regard to Gryzzlys answer):

Gryzzlys first example didn't handle different background colors (for the background and bubble).

But the second one does. Here's an example with background colors applied:

http://jsfiddle.net/tGnfb/

(I also added border-radius properties so that it will render borders for other browsers than Firefox).

Answer 3

This achieves the effect in FF. Use the appropriate border-radius variants for the other browsers. Essentially you use a 3 div system, one with the same color of the background. Does only work for background with a flat color.

<div class="top">some text here</div>
<div class="bottom"><div class="bottom2"></div></div>

And the CSS:

body
    {
    background-color:red;
    }

.top
    {
    display: block;
    width: 200px;
    height: 50px;
    background-color:white;
    padding:5px;

    -moz-border-radius-topleft:10px;
    -moz-border-radius-topright:10px;
    -moz-border-radius-bottomright:10px;
    }

.bottom
    {
    display: block;
    width: 20px;
    height: 20px;
    background-color: white;    
    }

.bottom2
    {
    display: block;
    width: 20px;
    height: 20px;
    background-color: red;  
    -moz-border-radius-topleft:20px;
    }

Answer 4

if you're trying to achieve that kind of look(a speech balloon) it's best to just use an image for that :)

Answer 5

There are ways you could solve this issue by using just CSS. I have decided to use a technique for tabs - but could be easily adapted for speech bubbles.

I cover a basic example here of how to make an Inverse Border Radius in CSS (here). This uses a trick with the size of Border to use the inside, you might have to do some positioning to get it to work properly however as you can see its possible.