Sent by Ghodmode on 3 December 2009 01:01
On Wed, 2009-12-02 at 13:01 -0800, Chick Newman wrote:
> I would like to know what people are doing to create rounded corners on div
> borders in non-mozilla , non-safari browsers. I thought I found a solution,
> which at least included opera, but I tried it and it isn't working there,
> either.
My preferred method is to create a single image that contains all 4
corners. Then I set it as the background image for a 4 DIVs that are
each only big enough for one of the corners. I relatively or absolutely
position the element I want rounded corners on, then I absolutely
position the DIVs containing the corner images, putting one in each
corner of the parent.
Using this method works wherever CSS works, but it requires you to
change the image whenever you change background colors. It only
requires one very small image.
There are several ways to do it with JavaScript and no images. I've
even seen one method that uses an absolutely positioned round-style
bullet like the kind that's used in bulleted lists.
Check these out: http://delicious.com/Ghodmode/roundedcorners
There's also a script at curvycorners.net that should recognize when you
use CSS3 rounded corners in your stylesheet and apply rounded corners
using JavaScript when the browser doesn't support the CSS3. I've found
it works quite well, but it has some conflicts with jQuery. Although
the documentation says that it works in Opera if you put your style
information into the page rather than in a separate stylesheet, I've
found that it only works in Opera if I call it manually.
Here's my preferred method:
<head>
<style type="text/css">
body { background-color: gray; }
div#roundme {
background-color: white;
position: relative;
}
div.corner {
/* This would be an image containing 4 5px rounded
corners with a transparent inside and a gray background */
background-image: url('images/corners.png');
width: 5px;
height: 5px;
position: absolute;
font-size: 0px;
}
div.corner.tl {
background-position: bottom right;
top: 0;
left: 0;
}
div.corner.tr {
background-position: bottom left;
top: 0;
right: 0;
}
div.corner.bl {
background-position: top right;
bottom: 0;
left: 0;
}
div.corner.br {
background-position: top left;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<div id="roundme">
<p>This is a paragraph!!</p>
<div class="corner tl"> </div>
<div class="corner tr"> </div>
<div class="corner bl"> </div>
<div class="corner br"> </div>
</div>
</body>
--
Ghodmode
http://www.ghodmode.com
>
> Thanks,
> Chick
>
> ______________________________________________________________________
> css-discuss [EMAIL-REMOVED]]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
