CSS Rounded Corners Question - is this even possible?

[NeedExpertHelp]

Hi,

I have a very simple question and I hope this is possible.

How can I use the following simple CSS Rounded Corners technique but WITHOUT using the repeating dot.gif image for the top, bottom, and side borders and instead using solid-colored CSS borders in its place + the 4 corner images:

[webcredible.co.uk...]

I did a bit of trial and error and I could not get it to look the same.

The reason I don't want to use the repeating dot.gif file is because it can create memory issues on smaller devices.

Thanks!

[Hoople]

The CSS3 properties 'border-radius' '-webkit-border-radius' and '-moz-border-radius' are useful to display rounded corners in the newer versions of Firefox, Chrome, Safari and the latest Opera (beta ver 10.50 and up). Using all 3 ensures at least one is used giving a curve :-) Browsers that don't support any of these CSS properties will see square corners unless a javascript solution is used.

There are Javascript solutions out there for curvy corners on the presently released versions of IE (6,7,8) and older versions of other browsers. Browsers that don't support javascript will see square corners. FYI some of the javascript 'eat' quite a bit of padding, allow more whitespace than is needed to degrade gracefully to avoid a 'wall of text' look on simpler browsers (older/cheap cell phones).

There are a number of useful links in the footer of the MSDN article "Rounded Corners in Internet Explorer" on Microsoft.com

[NeedExpertHelp]

Thanks for the info, Hoople.

However, in this particular case, I also need to target smaller devices that might have a smaller browser that is limited to XHTML Basic.

I've tested the solution I linked to, and it is simple enough that it works on most smaller devices, however, on some devices it produced a memory error due to having to repeat the dot.gif image too many times.

So if I can find a way to do that solution without the dot.gif image, then that should solve my problem. I just don't know how to do it.

Here is the CSS and HTML for that solution I linked to:

 <div class="t"><div class="b"><div class="l"><div class="r"><div class="bl"><div class="br"><div class="tl"><div class="tr">
Lorem ipsum dolor sit amet consectetur adipisicing elit
</div></div></div></div></div></div></div></div>

And the CSS that makes our round corner border is:

.t {background: url(dot.gif) 0 0 repeat-x; width: 20em}
.b {background: url(dot.gif) 0 100% repeat-x}
.l {background: url(dot.gif) 0 0 repeat-y}
.r {background: url(dot.gif) 100% 0 repeat-y}
.bl {background: url(bl.gif) 0 100% no-repeat}
.br {background: url(br.gif) 100% 100% no-repeat}
.tl {background: url(tl.gif) 0 0 no-repeat}
.tr {background: url(tr.gif) 100% 0 no-repeat; padding:10px} 

Any ideas?