Rounded corners.

[dorayme]

Anyone got any favourites re the best and simplest (or are these
too incompatible?) css strategies for rounded corners to boxes?
Lets say for plain colour backgrounds for both box and surrounds.

The one at

http://www.alistapart.com/articles/customcorners/

as exemplified by

http://www.alistapart.com/d/customcorners/step6.html

breaks in Safari and Firefox from my tests.

 

[cwdjrxyz]

Anyone got any favourites re the best and simplest (or are these
too incompatible?) css strategies for rounded corners to boxes?
Lets say for plain colour backgrounds for both box and surrounds.

The one at

http://www.alistapart.com/articles/customcorners/

as exemplified by

http://www.alistapart.com/d/customcorners/step6.html

breaks in Safari and Firefox from my tests.

An example of one method I wrote is at
http://www.cwdjr.net/geometric/cornersnew.html . It uses script to
write the CSS, and arose from a question at the com.lang.javascript
group. It works on my several browsers including most recent versions
of IE6, Opera, Firefox, Netscape, Seamonkey, and Mozilla. I don't know
about Safari, since I don't think I can load a Safari browser on my
Windows XP. You do use a small colored circle gif for the corners. The
size of the circle is adjusted in the code as needed, depending on the
radius of the corner you wish. The radius size of the circle gif needs
to be no more than for the maximum radius you will use for corners, and
it could be quite a bit smaller if the image is sharp. The background
of the gif should be transparent, with the width and height of the gif
the same as the diameter of the circle. I have a few circles other
than black, but none in passion pink metallic or such .

 

[dorayme]

An example of one method I wrote is at
http://www.cwdjr.net/geometric/cornersnew.html . It uses script to
write the CSS, and arose from a question at the com.lang.javascript
group. It works on my several browsers including most recent versions
of IE6, Opera, Firefox, Netscape, Seamonkey, and Mozilla. I don't know
about Safari, since I don't think I can load a Safari browser on my
Windows XP. You do use a small colored circle gif for the corners. The
size of the circle is adjusted in the code as needed, depending on the
radius of the corner you wish. The radius size of the circle gif needs
to be no more than for the maximum radius you will use for corners, and
it could be quite a bit smaller if the image is sharp. The background
of the gif should be transparent, with the width and height of the gif
the same as the diameter of the circle. I have a few circles other
than black, but none in passion pink metallic or such .

Thanks cwd, I will take a look tomorrow. The last few hours, i
have been messing about with the idea in

http://kalsey.com/2003/07/rounded_corners_in_css/

which I found via Google!

I have it working withe colours I want and after all that, I am
wondering if I really want rounded corners for the particular
design I am working on! But I will for sure want this from time
to time. I picked the one I did because I understood it! Which is
more than I can say for the gymnastics of some of the css ones I
have seen. But it is early days for me in this.

 

[Sally Thompson]

Anyone got any favourites re the best and simplest (or are these
too incompatible?) css strategies for rounded corners to boxes?
Lets say for plain colour backgrounds for both box and surrounds.

The one at

http://www.alistapart.com/articles/customcorners/

as exemplified by

http://www.alistapart.com/d/customcorners/step6.html

breaks in Safari and Firefox from my tests.

I have these two bookmarked, but have never used them in anger, as it were:

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

<http://www.spiffycorners.com/>

 

[Jonathan N. Little]

Anyone got any favourites re the best and simplest (or are these
too incompatible?) css strategies for rounded corners to boxes?
Lets say for plain colour backgrounds for both box and surrounds.

The one at

http://www.alistapart.com/articles/customcorners/

as exemplified by

http://www.alistapart.com/d/customcorners/step6.html

breaks in Safari and Firefox from my tests.

Donno works for me with Seamonkey 1.0.5 and Firefox 2.0, how does it break?

 

[patrick j]

Donno works for me with Seamonkey 1.0.5 and Firefox 2.0, how does it break?

For me with Safari and FireFox 1.5 if I widen the window a lot then the
header and footer sections literally break visually at the right. The
ends come off, honest As long as the window is not too wide then it
looks really good.

I have a 20" screen with 96 dpi.

 

[Kevin Scholl]

If you don't mind a little Javascript involved, you can use the JQuery
library and a small plugin to achieve different corners without images:

http://www.malsup.com/jquery/corner/

Some examples that I've been playing with:

http://beta.ksscholl.com/nbuy/template.html
http://beta.ksscholl.com/jquery/corners.html

Anyone got any favourites re the best and simplest (or are these
too incompatible?) css strategies for rounded corners to boxes?
Lets say for plain colour backgrounds for both box and surrounds.

The one at

http://www.alistapart.com/articles/customcorners/

as exemplified by

http://www.alistapart.com/d/customcorners/step6.html

breaks in Safari and Firefox from my tests.

--

*** Remove the DELETE from my address to reply ***

======================================================
Kevin Scholl http://www.ksscholl.com/
(e-mail address removed)

 

[Jonathan N. Little]

For me with Safari and FireFox 1.5 if I widen the window a lot then the
header and footer sections literally break visually at the right. The
ends come off, honest As long as the window is not too wide then it
looks really good.

I have a 20" screen with 96 dpi.

Actually same here 1280 x 1024. But it could be easily solved by
increasing the dims of the image:

http://www.alistapart.com/d/customcorners/images/custom_corners_topleft.gif

Currently at 800px × 600px

 

[dorayme]

Donno works for me with Seamonkey 1.0.5 and Firefox 2.0, how does it break?

<http://members.optushome.com.au/droovies/pics/crackStartsAt1020px
AndThenGetsBiggerAndBigger.png>

When window is wider than 1020, the crack starts and is what the
Tamils want to do from Sri Lanka...

 

[dorayme]

I have a 20" screen with 96 dpi.

I beat you, Patrick! One of my screens is 20" but 100 dpi.

 

[dorayme]

If you don't mind a little Javascript involved, you can use the JQuery
library and a small plugin to achieve different corners without images:

Thanks Kevin... just for now I do want to stay with CSS... It is
simpler than I thought in CSS in some ways...

 

[dorayme]

I have these two bookmarked, but have never used them in anger, as it were:

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

This one looks interesting, similar to the one I was playing with
yesterday but rather nice that one can and fiddle with the
colours right there and then and get the images made then and
there (how the hell do they do this, with php, js?). I messed
about for a while making my own corners yesterday!

Thanks, interesting one, downloaded a model for myself already.

 

[Dylan Parry]

Anyone got any favourites re the best and simplest (or are these
too incompatible?) css strategies for rounded corners to boxes?
Lets say for plain colour backgrounds for both box and surrounds.

If I ever need curvy corners I use the technique described at
http://www.html.it/articoli/niftycube/index.html - it's implemented
entirely through Javascript as a bells-and-whistles solution.

--
Dylan Parry
http://electricfreedom.org | http://webpageworkshop.co.uk

Programming, n: A pastime similar to banging one's head
against a wall, but with fewer opportunities for reward.

 

[dorayme]

If I ever need curvy corners I use the technique described at
http://www.html.it/articoli/niftycube/index.html - it's implemented
entirely through Javascript as a bells-and-whistles solution.

OK, I do like the idea of not having to use images... It uses
javascript. I don't mind, the bottom line is the ease of making
them, the best chance of them being seen in the browsers being
used and their stability. Will look into it, thanks.

 

[patrick j]

I beat you, Patrick! One of my screens is 20" but 100 dpi.

I don't know how many more dots that is but it's a lot!

On a, sort-of-related-but-not-very-much, note, I'm going to mention
what a good thing Parallels is. This, for those that don't know, is
emulation software for running Windows on a Mac. In fact you can run
numerous OSes but I'm using it to run Windows XP.

Anyway I mention it because I believe, Mr. dorayme, that you have a PC
amongst your computer collection and that you check out for IE 6 on
that no doubt.

I only have my Intel iMac [0] and so I have only one screen. For the
last couple of months to check up on what a web-site looks like then
I'd use Boot Camp as I had Windows XP on a separate partition. The
problem with Boot Camp is that you have to restart the computer and I
find this to be a big drag.

So today I've downloaded the demo of Parallels and I've installed my
Windows XP on that.

Boy is it good!

It is hugely superior to any other emulator on the Mac I've encountered
in the past, such as Virtual PC, it is very fast indeed. It's true that
I'm only using it with Internet Explorer, in fact there are no programs
installed on it apart from Windows XP standard ones, but it is very
slick indeed.

Anyway I'm sure I'm going to buy it now.

When IE 7 comes out I'm going to create another "virtual machine" on my
Parallels and install a copy of Windows on that to have IE 7.

[0] It's not true that I only have an Intel iMac. In fact my attic has
numerous Macs in it but they are all very old indeed. I keep Macs so
long that they are worthless by the time I replace them so they just go
into retirement in my attic. However in reality for actual use I have
just the one computer.

 

[dorayme]

On a, sort-of-related-but-not-very-much, note, I'm going to mention
what a good thing Parallels is. This, for those that don't know, is
emulation software for running Windows on a Mac. In fact you can run
numerous OSes but I'm using it to run Windows XP.

Anyway I mention it because I believe, Mr. dorayme, that you have a PC
amongst your computer collection and that you check out for IE 6 on
that no doubt.

Well, Mr (cough, splutter, cough) dorayme - if it be so, should
really be Mr Dorayme. But anyway, to more weighty matters, manly
matters indeed: Bootcamp!

Sounds not very practical according to your info. //s sounds a
good way to go. I do get almost the same functionality by a
Winbox next to my Mac tower and both Mac and Winbox connected to
different ports on the 20", thus a simple button press to go to
the VGA gets me the Windows box on screen (the Mac, on that
particular screen is connected to the dvi port of the screen).

True, I have to fish the mouse and keyboard for the Winbox out
from the back of the monitor where they are kept. Silly me has
been cursing Windows and Bill Gates quite unfairly at times
because nothing appeared on the screen from key presses... it
helps to be using the right keyboard! (yes, I know about KVM
switches and stuff... I'm too lazy to set this up.)

 

[Nico Schuyt]

dorayme wrote:

If I ever need curvy corners I use the technique described at
http://www.html.it/articoli/niftycube/index.html - it's implemented
entirely through Javascript as a bells-and-whistles solution.

Great link! Thanks