create a border-radius for div

Question

I've created a div, where in I've to write css for creating border-radius to that div. So I wanted the border-radius should be like the following image.

The CSS code what I've written is as follows.

{
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
            border-top-right-radius: 6% 60%; 
            border-bottom-right-radius: 6% 60%;

            margin: 10px 0;
            color: #FFFFFF;
            background: -moz-linear-gradient(top,  #2ea2f5 0%, #2ea2f5 50%, #0089f3 50%, #0089f3 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2ea2f5), color-stop(50%,#2ea2f5), color-stop(50%,#0089f3), color-stop(100%,#0089f3));
            background: -webkit-linear-gradient(top,  #2ea2f5 0%,#2ea2f5 50%,#0089f3 50%,#0089f3 100%);
            background: -o-linear-gradient(top,  #2ea2f5 0%,#2ea2f5 50%,#0089f3 50%,#0089f3 100%);
            background: -ms-linear-gradient(top,  #2ea2f5 0%,#2ea2f5 50%,#0089f3 50%,#0089f3 100%);
            background: linear-gradient(to bottom,  #2ea2f5 0%,#2ea2f5 50%,#0089f3 50%,#0089f3 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2ea2f5', endColorstr='#0089f3',GradientType=0 );
}

And even you can go through it jsfiddle.net

So please help me I've stuck with this from 2 days.

Answer 1

Well, I managed to do something similar, and it should be cross-browser supported ( after small edits ) :

http://jsbin.com/elubek/1/edit

CSS:

div.wrapper {
  position: relative;
  width: 450px;
}

div.tag {
  width: 400px;
  padding: 3px 10px;
  height: 74px;
  background: -webkit-linear-gradient(top,  #2ea2f5 0%,#2ea2f5 50%,#0089f3 50%,#0089f3 100%); 
  border-radius: 5px;
  position: absolute;
  top: 0;
  z-index: 120;
}

div.box1 {
  height: 62px;
  width: 62px;
  right: 0px;
  top: 9px;
  border-radius: 10px;
  z-index: -1;
  position: absolute;
  -webkit-transform: rotate(-45deg);
  background: -webkit-linear-gradient(top right,  #2ea2f5 0%,#2ea2f5 50%,#0089f3 50%,#0089f3 100%); 
  float: right;
}

div.circle {
  width: 10px;
  height: 10px;
  position: absolute;
  z-index: 5;
  border-radius: 100px;
  background: white;
  right: 10;
  top: 35px;
}

p {
  font-family: 'Verdana';
  color: white;
  margin: 0;
}

p.prgress-info { 
  font-size: 25px; 
  letter-spacing: -1px; 
  padding-top: 10px;
}

p.deadline {
  padding-bottom: 19px;
  font-size: 12px;
  font-weight: normal;
}

p.deadline span { font-size: 14px; }

HTML:

  <div class='wrapper'>
    <div class='tag'>
      <p class="prgress-info">003. In progress</p>
      <p class="deadline"><span>7</span>/ Deadline: 30 July 2013</p>
    </div>
    <div class='box1'></div>
    <div class='circle'></div>
  </div>

You can play with the height/width of div.box1, to achieve the radius you want ;)

Answer 2

border-radius does allow some complex shapes, using it's extended syntax. For example:

border-radius:15px 25px 25px 15px / 15px 45px 45px 15px;

See http://jsfiddle.net/tDCaA/1/ for this in action. It's heading in the direction you're looking for, but doesn't quite achieve it.

The trouble is that further tweaking doesn't get much closer -- with the straight lines you've got on the sample image, you're really not looking at a border-radius effect at all; it's a more complex shape than border-radius is designed to do. So my advice would be to stop focusing on border-radius as the answer here, and look for alternatives.

So what alternatives are there? Here are a few you could try:

• An SVG image. This example is a good case for an SVG image, as you've got a few little design elements in there like the white hole at the end of the tag which aren't easy to achieve in CSS.

• A CSS triangle. Draw the end part of the tag using the old triangle hack with a CSS border. You may have trouble getting the corners rounded on this though.

• Rotation. Create a second element (possibly using the CSS :after selector), that will act as the end piece of the tag. Then use CSS to rotate it 45 degrees to give it the required shape. To be honest though, I would consider using rotation for this to be overkill, and not great for browser performance. It should work though. And since we're already rotation, you could also use other transform effects to tweak it to the desired shape.

• CSS border-image. CSS also has a border-image property that can be used to do complex borders. Combined with SVG, this can be very powerful and can give you all the variable shaped borders you want. Most modern browsers support it now (http://caniuse.com/#search=border-image).

• An old-school background image. Don't be afraid of just using a plain png background image for this kind of thing. All the techniques above have their place, but background images work well and have compatibility with old browser versions. There's nothing wrong with using them for this kind of thing if the other solutions don't work for you.