10

I need to build a div with curved corner border, with out using any images in the corner. Is it possible?

I dont want to insert curved images in the corner, Please help me regarding this.

praveenjayapal
  • 37,683
  • 30
  • 72
  • 72
  • 1
    check [this post](http://stackoverflow.com/questions/635851/support-for-border-radius-in-ie) - a very simple cross-browser CSS3 code. – Shahar Jun 12 '12 at 16:51

5 Answers5

9

If you want to rely on webkit and mozilla browsers, you can use the following css commands:

.radius {
-moz-border-radius: 6px;
-webkit-border-radius:6px;
border-radius: 6px;
    }

Details can be viewed here.

info on the CSS2 spec border-radius can be found here

These unfortunately do not work for ie.

you could go a javascript route for IE only by using niftycube which has the added benefit of supporting column height leveling without problems.

jimg
  • 484
  • 6
  • 12
7

http://www.curvycorners.net/

Try this library out, it did wonders for me! It is a tested cross browser solution.

Derek P.
  • 1,569
  • 10
  • 19
  • 2
    That site seems [down](http://www.downforeveryoneorjustme.com/http://www.curvycorners.net). [Last project update](http://code.google.com/p/curvycorners/source/list) was on Mar, 2011. Project is hosted on [Google Code](http://code.google.com/p/curvycorners/). – Fernando Correia Nov 19 '12 at 23:47
6

You can use CSS to achieve rounded corners in modern browsers...

border-radius: 10px;

Handy Generator

This is known as progressive enhancement. IMO, this is better than images and or CSS tricks with margins and borders. Unless you absolutely must have rounded corners.

alex
  • 479,566
  • 201
  • 878
  • 984
0

Here's one I wrote that you're welcome to use if you like it. It renders a rounded-corner box of any dimensions with a background color but not a border around the entire box. It is for white page backgrounds, but that can be changed by editing the border color in the c1,c2 & c3 styles.

.rounded {background-color:#f1f0f1}
.rounded .inner {padding:8px 10px 8px 12px}
.rounded .c1 {height:1px;line-height:1px;font-size:1px;border-width: 0px 4px 0px 4px;border-color:#FFFFFF;border-style:solid;padding:0px}
.rounded .c2 {height:1px;line-height:1px;font-size:1px;display:block;border-width: 0px 2px 0px 2px;border-color:#FFFFFF;border-style:solid;padding:0px}
.rounded .c3 {height:2px;line-height:1px;font-size:1px;display:block;border-width: 0px 1px 0px 1px;border-color:#FFFFFF;border-style:solid;padding:0px}


   <div class="rounded" style="width:200px;height:100px">
    <div class="c1"></div><div class="c2"></div><div class="c3"></div>
        <div class="inner">
        -- Content Here --
        </div>
        <div class="c3"></div><div class="c2"></div><div class="c1"></div>
   </div>
Sal
  • 191
  • 1
  • 2
-2

I'd use a jQuery plugin to handle rounded corners. Here's the list of available rounded corner plugins on the jQuery site: http://plugins.jquery.com/taxonomy/term/189

Jon Galloway
  • 52,327
  • 25
  • 125
  • 193