Curved block in CSS3

I was wondering if there is a way to have a block with [this shape][1] (any CSS solution, 3D too). I tried with border-radius but you can't have negative values.

Thanks.

EDIT:

I'm sorry for the lack of informations but I's lie a block, not a border (the image wasn't good, my ba开发者_如何学JAVAd). Actually it's for a ribbon, I'd like it to be a bit curved, like this one, and because I have to write text in it, it can't be a border.

And it would be great if it is doable in CSS and not Canvas/SVG.

Thanks again.

EDIT: Done! More details here: http://forrst.com/posts/CSS3_Curved_Ribbon-IyB

http://jsfiddle.net/efortis/E6SRf/1

<div class="clipper">
  <div class="shape"> </div> 
</div>

.shape{
 border-radius: 600px;
 width: 600px;
 height: 600px;
 border: 4px solid black;
}

.clipper {
 width: 610px;
 height: 150px;
 overflow:hidden;
}

Directly copying from this site:

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

var centerX = 288;
var centerY = 160;
var radius = 75;
var startingAngle = 1.1 * Math.PI;
var endingAngle = 1.9 * Math.PI;
var counterclockwise = false;

context.arc(centerX, centerY, radius, startingAngle, endingAngle, counterclockwise);

context.lineWidth = 15;
context.strokeStyle = "black"; // line color
context.stroke();

This produces this arc.

Here's one more using the :after psuedo-element. Same clipping idea as the other CSS answer, just hiding the overflow so the border appears less round.

Markup:

<div></div>

CSS:

div:after {
    content:" ";
    height:80px;
    display:block;
    width:160px;
    border-radius:80px 80px 0 0;
    border:2px solid #000;   
    border-bottom:0;
}

div {
    height:40px;
    overflow:hidden;
}

Demo: http://jsfiddle.net/Cbm7n/1/