Round corner borders Using Div?

[harish]

Hi everyone,
How to make a round corner dorders using div? with
images or without images. Pls help me!
--
harish
------------------------------------------------------------------------
harish's Profile: http://www.highdots.com/forums/m11
View this thread: http://www.highdots.com/forums/t174579

[Mark Parnell]

Deciding to do something for the good of humanity, harish
<ha***********@ no-mx.forums.yourd omain.com.au> declared in
comp.infosystem s.www.authoring.stylesheets:

How to make a round corner dorders using div? with
images or without images. Pls help me!

http://www.albin.net/CSS/roundedCorners/

--
Mark Parnell
My Usenet is improved; yours could be too:
http://blinkynet.net/comp/uip5.html

[phil-news-nospam]

On Thu, 11 May 2006 15:07:53 +1000 Mark Parnell <we*******@clar kecomputers.com .au> wrote:
| Deciding to do something for the good of humanity, harish
| <ha***********@ no-mx.forums.yourd omain.com.au> declared in
| comp.infosystem s.www.authoring.stylesheets:
|
|> How to make a round corner dorders using div? with
|> images or without images. Pls help me!
|
| http://www.albin.net/CSS/roundedCorners/

So how can one make rounded corners WITH border decorations that also show
up along the sides? The simplest is a border that is a different color than
either the outside background or the inside background. I have more complex
examples but they don't work in IE (only tested Firefox, results from IE
were reported by others).

http://phil.ipal.org/usenet/ciwas/2006-05-11/rcb1.html

Note the increasing radius of the rounded corners toward the bottom boxes.
If the images fail to load, the boxes end up keeping their initial square
borders.

Here's some examples I did a few years ago using only GIF image files and
HTML tables (and a lot of them). Beware: View->Source may be hazardous to
your vision.

http://phil.ipal.org/usenet/ciwas/2006-05-11/rbox.html

--
-----------------------------------------------------------------------------
| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
| (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------

[axlq]

This isn't the answer you want... but the way I make rounded borders
is to put

border-radius: 0.5em;

in my CSS definition, and then wait for CSS3 to get supported. I
can wait.

To me, the current methods of making rounded borders are hacks, and
I'm not particularly interested in those. So I use beveled borders,
or insets, or ridges, or others that CSS2 currently offers.

-A

[phil-news-nospam]

On Thu, 11 May 2006 21:50:37 +0000 (UTC) axlq <ax**@spamcop.n et> wrote:
| This isn't the answer you want... but the way I make rounded borders
| is to put
|
| border-radius: 0.5em;
|
| in my CSS definition, and then wait for CSS3 to get supported. I
| can wait.

Are you waiting for it to be supported in FF or IE?
| To me, the current methods of making rounded borders are hacks, and
| I'm not particularly interested in those. So I use beveled borders,
| or insets, or ridges, or others that CSS2 currently offers.

I use the hacks. I look forward to when "the right way" gets widely
supported. But unless IE dies off, that may be a long long time.

--
-----------------------------------------------------------------------------
| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
| (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------

[axlq]

In article <e4*********@ne ws2.newsguy.com >, <ph************ **@ipal.net> wrote:

On Thu, 11 May 2006 21:50:37 +0000 (UTC) axlq <ax**@spamcop.n et> wrote:
| border-radius: 0.5em;
|
| in my CSS definition, and then wait for CSS3 to get supported. I
| can wait.

Are you waiting for it to be supported in FF or IE?
Anything, really. While I wouldn't mind having rounded corner boxes
on my pages, it's not so important that I want to spend a lot of
time figuring out how to do it, when I have more pressing matters to
attend to (like how to make a useful drop-down menu from a tab bar).
Hacking rounded borders into my pages is on my list of things to do,
but it's way down on the low-priority end. So I use border-radius
and I expect someday I'll discover that FF supports it.
I use the hacks. I look forward to when "the right way" gets widely
supported. But unless IE dies off, that may be a long long time.

IE7, from what I have read, is a drastic improvement but still not
perfect.

-A

[Martin Jay]

In message <e4*********@ne ws2.newsguy.com >, ph************* *@ipal.net
writes

On Thu, 11 May 2006 21:50:37 +0000 (UTC) axlq <ax**@spamcop.n et> wrote:
| This isn't the answer you want... but the way I make rounded borders
| is to put
|
| border-radius: 0.5em;
|
| in my CSS definition, and then wait for CSS3 to get supported. I
| can wait. Are you waiting for it to be supported in FF or IE?

Firefox already does, in its own way. There a nice example of it at:

<http://smhill.net/resources/css/rounded_corners/>

Visitors with other browsers will get standard 90 degree corners.
--
Martin Jay

[axlq]

In article <9m************ **@spam-free.org.uk>,
Martin Jay <ma****@spam-free.org.uk> wrote:

In message <e4*********@ne ws2.newsguy.com >, ph************* *@ipal.net
writes

On Thu, 11 May 2006 21:50:37 +0000 (UTC) axlq <ax**@spamcop.n et> wrote:
| This isn't the answer you want... but the way I make rounded borders
| is to put
|
| border-radius: 0.5em;
|
| in my CSS definition, and then wait for CSS3 to get supported. I
| can wait.

Are you waiting for it to be supported in FF or IE?

Firefox already does, in its own way. There a nice example of it at:

<http://smhill.net/resources/css/rounded_corners/>

I wonder why "in its own way" was necessary. Why didn't the FF
authors just support the CSS3 border-radius instead of inventing
some new and browser-specific attribute called "-moz-border-radius"?

-A

[Alan J. Flavell]

On Fri, 12 May 2006, axlq wrote:

I wonder why "in its own way" was necessary. Why didn't the FF
authors just support the CSS3 border-radius instead of inventing
some new and browser-specific attribute called "-moz-border-radius"?

Bit of history for you. MSIE3 implemented some CSS(1) when it was
still in draft. And misbehaved royally when the actual specification
came out, and some of us started to code to it. Misbehaved so badly
that we had to find ways of hiding the CSS from that thing.

CSS3 is still in draft. Various developers are getting practice with
implementing the drafts, without falling into the trap of presenting
them as if they were standard CSS. This is *good* - don't knock it.

The CSS specification is very clear about how to handle undefined
properties. We can happily code -moz-whatever and -opera-whatever and
-konq-whatever... to call out whatever their developers care to
implement experimentally. Other browsers are required to calmly
ignore what they don't understand. When CSS3 is final, they can
introduce the new standard property names, and phase out the
experimental ones, with a decent overlap, causing a minimum of
disruption.

[phil-news-nospam]

On Fri, 12 May 2006 16:03:26 +0100 Martin Jay <ma****@spam-free.org.uk> wrote:
| In message <e4*********@ne ws2.newsguy.com >, ph************* *@ipal.net
| writes
|>On Thu, 11 May 2006 21:50:37 +0000 (UTC) axlq <ax**@spamcop.n et> wrote:
|>| This isn't the answer you want... but the way I make rounded borders
|>| is to put
|>|
|>| border-radius: 0.5em;
|>|
|>| in my CSS definition, and then wait for CSS3 to get supported. I
|>| can wait.
|
|>Are you waiting for it to be supported in FF or IE?
|
| Firefox already does, in its own way. There a nice example of it at:
|
| <http://smhill.net/resources/css/rounded_corners/>
|
| Visitors with other browsers will get standard 90 degree corners.

It could be better, but it doesn't seem to be too bad. I'd like some
anti-aliasing in it. I'd also like a little more in the way of border
striping.

I threw these together to explore it. The first uses round corners just
for background coloring. The second combines round corners with a drop
shadow effect where the shadow is rounded, too.

http://phil.ipal.org/usenet/ciwas/20...corners-1.html
http://phil.ipal.org/usenet/ciwas/20...corners-2.html

For those with browsers that can't render it, you can see these PNGs:

http://phil.ipal.org/usenet/ciwas/20...-corners-1.png
http://phil.ipal.org/usenet/ciwas/20...corners-2a.png
http://phil.ipal.org/usenet/ciwas/20...corners-2b.png

The "2b" image is with the pointer hovering over the box.

--
-----------------------------------------------------------------------------
| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
| (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------