Create border radius for div

Question

I created a div where I have to write css to create a border-radius for this div . So I wanted border-radius to look like this.

The CSS code I wrote 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 am stuck with this from 2 days.

Answer 1

Well, I managed to do something like this, and it should be supported by a cross browser (after minor changes):

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 div.box1 to achieve the desired radius;)

Answer 2

border-radius resolves some complex shapes using advanced syntax. For instance:

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

See http://jsfiddle.net/tDCaA/1/ for this in action. It moves in the direction you are looking for, but not quite that.

The problem is that further customization does not come nearer - with the straight lines that you have on the sample, you don’t look at the border-radius effect at all; this is a more complex form than border-radius . So my advice would be to stop focusing on border-radius as an answer here and look for alternatives.

So what are the alternatives? Here are some tips you could try:

• Image SVG . This example is a good example for an SVG image, since you have some small design elements, such as the white hole at the end of the tag, that are not easy to achieve in CSS.

• CSS Triangle Draw the end of the tag using the old triangle with CSS paint. You may have trouble getting corners rounded on this, though.

• Rotation . Create a second element (possibly using the CSS :after selector) that will act as the final element of the tag. Then use CSS to rotate it 45 degrees to give it the desired shape. To be honest, I would think about using rotation to make it redundant, and not very useful for browser performance. That should work. And since we are already spinning, you can also use other transformation effects to adjust it to your desired shape.

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

• Image of an old school . Don't be afraid to just use a simple png background image for this kind of thing. All the above methods have their place, but background images work well and are compatible with older versions of the browser. There is nothing wrong with using them for this kind of thing, unless other solutions work for you.