rounded corners without images

[aaron.reese]

Guys,

I am trying to add rounded corners to my CSS containers (some of which
are still tables - BOO!!!!)

I dont want to use images becuase I need to update the both the
foreground and background colours on a regular basis and as you know,
only one colour of a gif can be transparent so either the foreground or
background colour will be wrong...

I am using php as a server side scripting language and was thinking of
using <HR> in a loop and using Sine and Cosine calculations to
determine the length of the <HR>.

E.g.

I have a table 100 px wide and want a curve with a radius of 10 on each
corner. This means that the first <HR> needs to be the same width as
the table (100px) and the 20th <HR> needs to be 120px (10px overlap on
each end). The length of the intermeidate <HR>s is determined using
algebra based on how far round the curve you are.

The problem is that <HR> seems to leave white space around the element
even when you set border, padding and margin to be zero. Does anyone
have any ideas??

Obiron

 

[Edwin van der Vaart]

Guys,

I am trying to add rounded corners to my CSS containers (some of which
are still tables - BOO!!!!)

Rounded corners in CSS works only in Netscape and Mozilla, perhaps also
in Opera. With the following example:
-moz-border-radius: 1em;
--
Edwin van der Vaart
http://www.semi-conductor.nl/ Links to Semiconductors sites
http://www.evandervaart.nl/ Edwin's persoonlijke web site
Explicitly no permission given to Forum4Designers, onlinemarketingtoday,
24help.info, issociate.de, velocityreviews, umailcampaign.com,
gthelp.com, webfrustration.com, excip.com and many other to duplicate
this post.

 

[Toby Inkster]

I dont want to use images

The CSS(3) way is "border-radius", but I don't think any browsers fully
support it yet; Mozilla has an experimental implementation, but you need
to use "-moz-border-radius".

There is an HTC hack for Internet Explorer. It's not standards-compliant
of course, but as long as you include the standards-compliant equivalent,
it shouldn't do too much harm.

http://www.akatsukinishisu.net/itazuragaki/css/nifty_corners_behavior.html

That page should show you everything you need to know. It's in Japanese,
but the code samples should be usable, and you should be able to download
"round.htc" for the IE-stuff.

 

[aaron.reese]

Edwin van der Vaart wrote:

"Rounded corners in CSS works only in Netscape and Mozilla, perhaps
also
in Opera"


Yes, I know and I want this to be browser independant because
unfortunatley most people still use IE.

I want to write straight HTML, proably without CSS that looks like this

<HR width = 100>
<HR width = 104>
<HR width = 107>
<HR width = 110>
<HR width = 112>
<HR width = 113>
<HR width = 114>

so that the edge looks like this (HRs centered); each dash representing
a pixel

-----
----------
--------------
----------------
-----------------
-----------------


So that the end is curved.

The problem is that I can't get two HRs to sit next to each other
without any white space.

I am prepared to use any in-line tag such as tables or divs but I think
HRs would be easier if I can get them to work.

Tables would require creating a table 120 cells wide and then using
colspan on each row which is produces messy code; and again I am
struggling to eliminate white space between cells and rows.

Obiron

 

[aaron.reese]

OK, Got it.

I've not seen it done anywhere and this is a bit of a rough
implementation:-

You need to get your server side script to generate code that looks
like the following:-

<div
style='font-size:20px;overflow:hidden;height:1px;width:100px;border:solid
0px;background-color: #00ffff'>text</div>
<div
style='font-size:20px;overflow:hidden;height:2px;width:105px;border:solid
0px;background-color: #00ffff'>text</div>
<div
style='font-size:20px;overflow:hidden;height:2px;width:109px;border:solid
0px;background-color: #00ffff'>text</div>
<div
style='font-size:20px;overflow:hidden;height:2px;width:112px;border:solid
0px;background-color: #00ffff'>text</div>
<div
style='font-size:20px;overflow:hidden;height:3px;width:114px;border:solid
0px;background-color: #00ffff'>text</div>
<div
style='font-size:20px;overflow:hidden;height:4px;width:115px;border:solid
0px;background-color: #00ffff'>text</div>
<div
style='font-size:20px;overflow:hidden;height:3px;width:115px;border:solid
0px;background-color: #00ffff'>text</div>
<div
style='font-size:20px;overflow:hidden;height:2px;width:114px;border:solid
0px;background-color: #00ffff'>text</div>
<div
style='font-size:20px;overflow:hidden;height:2px;width:112px;border:solid
0px;background-color: #00ffff'>text</div>
<div
style='font-size:20px;overflow:hidden;height:2px;width:109px;border:solid
0px;background-color: #00ffff'>text</div>
<div
style='font-size:20px;overflow:hidden;height:2px;width:105px;border:solid
0px;background-color: #00ffff'>text</div>
<div
style='font-size:20px;overflow:hidden;height:1px;width:100px;border:solid
0px;background-color: #00ffff'>text</div>


Note that on the height and length change on some of the divs. This
example gives a rounded end to the colour block (a bit blocky but that
should be possible to fix with some neat anti-alais code to fade the
foreground to the background)

The size and position would need to be generated from some calcuations.

I've not seen this solution mentioned anywhere else. What is the
problem with it in other browsers? (i use a Slimbrowser, built on IE so
have not tried it in Mox, Fox, Opera etc.)

Obiron

 

[Martin Jay]

I am trying to add rounded corners to my CSS containers (some of which
are still tables - BOO!!!!)

I dont want to use images becuase I need to update the both the
foreground and background colours on a regular basis and as you know,
only one colour of a gif can be transparent so either the foreground or
background colour will be wrong...

"Nifty Corners" provides rounded corners without using any images. I
haven't explored the disadvantages of using this method, though. See:

I am using php as a server side scripting language and was thinking of
using <HR> in a loop and using Sine and Cosine calculations to
determine the length of the <HR>.

Well, if you're using server side scripting you could make the rounded
corners on he hoof. One way is to create a large circle and reduce it
to the desired size - this will give you nice anti-aliasing. Then chop
the circle into quarters and you have your corners.

 

[Toby Inkster]

You need to get your server side script to generate code that looks
like the following:-
[snip]

This is a really horrible idea.

 

[aaron.reese]

This is a really horrible idea.

Why?, It seems to me to be quite an elegant solution.

It works without images so is not color dependant, is scalable, can be
contained inside another container div to precisely place it on the
page, does not require javascript which some users turn off, and as it
only uses CSS2 tags it should be browser independant. I agree that
writing in-line style sheets is not great, but you could farm quite a
lot of the setting to a REL style sheet and simply override the width
element in-line

I am going to write a PHP function and post it here (and cross post on
PHP boards - I know... but I need the feedback from them and they won't
see it here)

It will take the following arguments:-

divwidth - The width of the element to be contained
xradius - the length of the radius on the X- axis
yradius - the length of the radius on the Y-axis
fgcolor - the colour of the border
bgcolor - the colour of the background

I will then do the following:-

work out the difference between xradius and yradius and divide by
yradius to give me the radius-step.

then loop for yradius to 1

using pythagous theorem, I will calculate the length of the line to
fill the radius on the x axis.

X^2 * Y^2 = Z^2

I know Y becuase it is the loop counter, decreasing one pixel for each
line.

I know Z because it is yaxis + ((yaxis - loopcounter) * radius-step)

so I can calculate X. I have not worked out the anti-alaising yet.

end loop

I will then add 2 * the loop result to the divwidth and create a div
of this width

I suspect it will look dodgy with radius curves of less than 20px but
we will give it a go. I will post the whole function when it is
finnished.


If you wanted to try to keep layout separate from content, the
parameters for the function could always be included in an include file
which would allow you to set up different 'classes' of rounded corners


obiron

 

[Rik]

If you wanted to try to keep layout separate from content....

Yes indeed.
What are al those <hr>'s doing? They have nothing to do with the content.
That's the bit people fall over. <hr> is already highly dubious when talking
about semantic meaning, and now you're flooding your HTML with it...

Grtz,

 

[Travis Newbury]

Yes, I know and I want this to be browser independant because
unfortunatley most people still use IE.

Why dos it have to be unfortuanatally?

 

[aaron.reese]

Yes indeed.
What are al those <hr>'s doing? They have nothing to do with the content.
That's the bit people fall over. <hr> is already highly dubious when talking
about semantic meaning, and now you're flooding your HTML with it...

The HRs were to be used to create lines of different lengths that when
placed together look like a curve. Incidentally I am only interested
at the moment in rounded corners on boxes, not on creating outlines
which this method would not be so great for.

I've given up on the HRs and using DIVS instead which makes a bit more
sense but still makes for heavy reading in the HTML.


Of course you could do it the other way round, put a square border
round the container you want and then use DIVS to blank out the corners
but I think that may prove to be just as unreadable

I've actually just picked up a CSS book in town which suggested doing
just this but with defined styles rather than creating HTML server side
but the end solution was the same but without the flexibility.

Obiron

 

[Toby Inkster]

Why?, It seems to me to be quite an elegant solution.

It's as elegant as a pile of poo. Consider how it looks in a non-CSS
browser. Consider how it sounds in a screen reader (clue: "text text text
text text text...") and what Google will see.

 

[aaron.reese]

It's as elegant as a pile of poo. Consider how it looks in a non-CSS
browser. Consider how it sounds in a screen reader (clue: "text text text
text text text...") and what Google will see.

OK, do a browser check and only output the rounded corners if we are
using a CSS compatible browser.

How does Google track and rank pages generated from include files and
database queries anyway??

 

[Toby Inkster]

OK, do a browser check and only output the rounded corners if we are
using a CSS compatible browser.

Which can't (reliably) be done.

How does Google track and rank pages generated from include files and
database queries anyway??

How can Google tell whether or not a page is generated from an include
file or database query? (Hint: it can't.)