471,618 Members | 1,186 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,618 software developers and data experts.

Simple Rounded Corners on Div

Searching the web, there seems to be a myriad of ways to achieve
rounded corners on a fixed-width div. I'm looking for suggestions on
the simplest, most straight-forward method of achieving this.

Thanks.

-Ray

Oct 19 '07 #1
8 2104
In article
<11*********************@i38g2000prf.googlegroups. com>,
rf**@scoe.net wrote:
Searching the web, there seems to be a myriad of ways to achieve
rounded corners on a fixed-width div. I'm looking for suggestions on
the simplest, most straight-forward method of achieving this.
You are likely to profit by reading:

http://www.sitepoint.com/article/bre...out-of-the-box

--
dorayme
Oct 19 '07 #2
In article
<do**********************************@news-vip.optusnet.com.au>,
dorayme <do************@optusnet.com.auwrote:
In article
<11*********************@i38g2000prf.googlegroups. com>,
rf**@scoe.net wrote:
Searching the web, there seems to be a myriad of ways to achieve
rounded corners on a fixed-width div. I'm looking for suggestions on
the simplest, most straight-forward method of achieving this.
Perhaps more directly... you might care to adapt

http://www.neuroticweb.com/recursos/css-rounded-box/

to your purposes.

--
dorayme
Oct 19 '07 #3
In article
<do**********************************@news-vip.optusnet.com.au>,
dorayme <do************@optusnet.com.auwrote:
In article
<11*********************@i38g2000prf.googlegroups. com>,
rf**@scoe.net wrote:
Searching the web, there seems to be a myriad of ways to achieve
rounded corners on a fixed-width div. I'm looking for suggestions on
the simplest, most straight-forward method of achieving this.

You are likely to profit by reading:

http://www.sitepoint.com/article/bre...out-of-the-box
Sorry about this... forget it. I was looking at it but the more
I see the more it worries me the fixation on pixels...

And about the url to that rounded corner generator, now that I
have time to look closer, you are likely to need to be a bit
handy with image manip programs... that generator at:

http://www.neuroticweb.com/recursos/css-rounded-box/

is actually rather wooden and does not always function correctly.
It does not always change the backgound colour for the little
images reliably!). But it is not a hard thing to get the gifs
right. Now, if you do not want the divs to be too rigid and you
anticipate big variations in size on different users machines,
you may have to em size all the relevant gifs for them to grow
and shrink right. There is no way out but to experiment. But lett
me not say this without doing it myself:
How about this adaptation:

<http://netweaver.com.au/test/roundCnr/roundCnrExperiment.html>

Seems to grow and adapt pretty well?

--
dorayme
Oct 19 '07 #4
In article
<do**********************************@news-vip.optusnet.com.au>,
dorayme <do************@optusnet.com.auwrote:
you may have to em size all the relevant gifs
no... again, sorry, these are bg images, but I emmed other
things. I think I need antibiotics, I am crook... Fancy having to
go to the bloody doc and chemist instead of the beach on a day
like this in Sydney.
for them to grow
and shrink right. There is no way out but to experiment. But let
me not say this without doing it myself:
How about this adaptation:

<http://netweaver.com.au/test/roundCnr/roundCnrExperiment.html>

Seems to grow and adapt pretty well?
--
dorayme
Oct 19 '07 #5
Dorayme, sounds like you're havin' the same kind of Friday I am! :P

Thanks for the links. I checked 'em out and was impressed by the
generator, but realized that perhaps my rounded boxes aren't as
straight-forward as I thought. My layout calls for a lightly shaded
box with a darker stroke around the edge -- something the generator
can't pull off. I'm not even sure it can be pulled off. But I
appreciate your input.

-Ray

Oct 19 '07 #6
On 2007-10-19, dorayme <do************@optusnet.com.auwrote:
[...]
><http://netweaver.com.au/test/roundCnr/roundCnrExperiment.html>
This looks doesn't look so good in Firefox.

The problem seems to be that you're setting "font-size: 1px; height:
1em" on the divs that contain the curved bits.

If the font-size is 1px then 1em should be about 1px, so Firefox looks
right to me. But Konqueror and Opera both make those boxes much higher.
Oct 20 '07 #7
On 10/18/07 05:58 pm, rf**@scoe.net wrote:
Searching the web, there seems to be a myriad of ways to achieve
rounded corners on a fixed-width div. I'm looking for suggestions on
the simplest, most straight-forward method of achieving this.
None of those myriad appealed to you?
<http://www.html.it/articoli/nifty/index.html>

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Oct 20 '07 #8
In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:
On 2007-10-19, dorayme <do************@optusnet.com.auwrote:
[...]
<http://netweaver.com.au/test/roundCnr/roundCnrExperiment.html>

This looks doesn't look so good in Firefox.

The problem seems to be that you're setting "font-size: 1px; height:
1em" on the divs that contain the curved bits.

If the font-size is 1px then 1em should be about 1px, so Firefox looks
right to me. But Konqueror and Opera both make those boxes much higher.
Thanks Ben. I was trying to serve up something to help OP and
changed a few things I thought needed more fluid treatment... I
looked in Opera and Camino, you are right, it was bad! Hope it it
better now, I just put the font-size concerned into em without
thinking further about it, it seems to work now.

--
dorayme
Oct 21 '07 #9

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

2 posts views Thread by meltedown | last post: by
2 posts views Thread by Dino Buljubasic | last post: by
8 posts views Thread by TheCornjerker | last post: by
6 posts views Thread by Schraalhans Keukenmeester | last post: by
5 posts views Thread by Cindy Lee | last post: by
4 posts views Thread by PWS | last post: by
6 posts views Thread by moondaddy | last post: by
1 post views Thread by XIAOLAOHU | last post: by
reply views Thread by leo001 | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.