473,324 Members | 2,246 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

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

Round angles

Hi at all,
I'ld like to know what is the best CSS crossbrowser mean to round the
angles of <DIV> without images.
Regards and thank you very much in advance
Steel
Nov 23 '05 #1
10 4785
Steel wrote:
I'ld like to know what is the best CSS crossbrowser mean to round the
angles of <DIV> without images.


There isn't a CSS way to round the corners of elements without using images.
CSS 3 is likely to include the border-radius property, I think there is
some support for it among browsers already.

http://www.w3.org/TR/2005/WD-css3-ba...-border-radius

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is
Nov 23 '05 #2
"Steel" <st**************@notnotsteeel.net> wrote:
I'ld like to know what is the best CSS crossbrowser mean to round the
angles of <DIV> without images.


Assuming that you mean rounded borders, there is no such method. The
required CSS is part of the CSS3 proposals, afaik no browser supports
that yet. Recent Gecko based browsers have proprietary -moz- properties
to create rounded borders.

Using those proprietary properties, Gecko renders non anti-aliased round
borders, quite ugly. The same ugly rendering can be expected from other
browsers when they implement it, so you are better off by using one of
the existing image based methods for the foreseeable future.

--
Spartanicus
Nov 23 '05 #3
Steel wrote:
Hi at all,
I'ld like to know what is the best CSS crossbrowser mean to round the
angles of <DIV> without images.
Regards and thank you very much in advance
Steel


If you would like to try CSS3, then try this:

<style type="text/css">
a:link.roundedCorners {
margin: 0;
padding: 0 2px;
border: solid 1px #f33;
-moz-border-radius: 50%
}

a:hover.roundedCorners {
background-color: #fcc;
margin: 0;
padding: 0 2px;
border: solid 1px #f00;
-moz-border-radius: 50%
}
</style>
<p>This is an <a class="roundedCorners" href="#">example</a>, of CSS
rounded corners. Firefox/Moz will present <a class="roundedCorners"
href="#">Round Borders</a> initially as well as on hover. All others
will show a square border only on hover.</p>

--
Gus
Nov 23 '05 #4
Once upon a time *Steel* wrote:
Hi at all,
I'ld like to know what is the best CSS crossbrowser mean to round the
angles of <DIV> without images.
Regards and thank you very much in advance


If you don't mind different background colors for the boxes, try this
links:

http://www.cssplay.co.uk/boxes/snazzy.html
http://www.cssplay.co.uk/boxes/krazy.html

Not the best solutions, but to a certain degree possible as
workarounds until CSS3 is videly supported. :)

--
/Arne
-- *Joke of the day* ----------------------------------------
A customer called the Canon help desk with a problem with her printer.
Tech Support: Are you running it under 'Windows'?
Customer: No, my desk is next to the door, but that is a good point.
The man sitting next to me is under a window, and his printer is
working fine.
-------------------------------------------------------------
Nov 23 '05 #5
Gus Richter wrote:
If you would like to try CSS3, then try this: -moz-border-radius: 50%


That isn't CSS3. Its a proprietary implementation of something that might be
in CSS 3 under a different name.

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is
Nov 23 '05 #6
David Dorward wrote:
Gus Richter wrote:

If you would like to try CSS3, then try this:


-moz-border-radius: 50%

That isn't CSS3. Its a proprietary implementation of something that might be
in CSS 3 under a different name.


Very observant! Thank you for the correction.
It is an experimental use by Mozilla of the proposed CSS3 specification.

--
Gus
Nov 23 '05 #7
Gus Richter wrote:
It is an experimental use by Mozilla of the proposed CSS3 specification.


And it's incompatible with the proposed CSS3 property!

The Mozilla implementation has a shorthand like:

border-radius: topleft topright bottomright bottomleft;

CSS3 doesn't.

OTOH CSS3 allows you to specify eliptically shaped borders: Mozilla
doesn't.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact

Nov 23 '05 #8
Spartanicus wrote:
Assuming that you mean rounded borders, there is no such method. The
required CSS is part of the CSS3 proposals, afaik no browser supports
that yet. Recent Gecko based browsers have proprietary -moz- properties
to create rounded borders.


There's also -khtml-border-radius.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact

Nov 23 '05 #9
Toby Inkster wrote:
Gus Richter wrote:

It is an experimental use by Mozilla of the proposed CSS3 specification.

And it's incompatible with the proposed CSS3 property!

The Mozilla implementation has a shorthand like:

border-radius: topleft topright bottomright bottomleft;

CSS3 doesn't.

OTOH CSS3 allows you to specify eliptically shaped borders: Mozilla
doesn't.


Thank you for that. As I said, it is experimental.
Nothing wrong with a proprietary capability!
Support is not complete for something which may change at any time.
As they like to say, if you want that capability, submit a patch or get
someone to take interest and do it for you. ;-)

--
Gus
Nov 23 '05 #10
Toby Inkster wrote:
Gus Richter wrote:
It is an experimental use by Mozilla of the proposed CSS3 specification.


And it's incompatible with the proposed CSS3 property!


-moz-border-radius has been in place for several years now, based on the
CSS3 spec at the time it was implemented. The -moz version hasn't
changed, but the spec has.

Stuff happens. Be glad there is a -moz property so their now
non-standard version won't affect other browsers.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
Nov 23 '05 #11

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

6
by: Steel | last post by:
Hi at all the last year I looked this CSS : cursor: hand; -moz-border-radius-topleft:18%; -moz-border-radius-topright:18%; -moz-border-radius-bottomleft:18%; -moz-border-radius-bottomright:18%;...
2
by: Matias Silva | last post by:
Can anybody tell me why I am getting rounding errors using the ROUND function. 3.7125 rounds to 3.70 when I use the following: TRUNCATE(ROUND(units_pay_amount * fees_amount, 2),2))) The correct...
1
by: Dan | last post by:
Hello, I have been working on a problem for a day now and am spinning my wheels. What is the easiest way to add two sets of roll/pitch/yaw angles? For example, an airplane is at 25deg pitch, 0...
1
by: Stephen Takacs | last post by:
I've been reading lots of rounded corners table tutorials lately, because I'm a Perl guru, not an HTML guru. :-) So far all of the examples I've seen have edges with narrow angles, which fit...
7
by: kkmigas | last post by:
Can some one explain if this can be fixed using php.ini settings ? echo "round 20.545 -".round(20.545,2)."<br>"; echo "round 20.555 -".round(20.555,2)."<br>"; echo "number_format 20.545...
2
by: Jerry Manner | last post by:
HI I am looking for the right css to create a rectangle with round angles. In that rectangle will be different text on my webpage. So the width can be different for eacht label. How should my...
4
by: =?Utf-8?B?UmVuZQ==?= | last post by:
Hello everyone I have a problem with Math.Round, it´s ocurring some strange: Math.Round(12.985) = 12.98, it´s wrong. It should be: 12.99 Why?? What is the problem? Help ME !!!!
1
by: ramya naidu | last post by:
Hai i have to set range of angles to text box what it exactly mean is when i type value of angle in textbox it should allow values from 0 to 360 if the vlaue is nore than that i need to message so...
3
by: afrogazer | last post by:
I am creating a wind rose using a polar bar plot bu the points do not seem to align to the correct angles. Here is the sample code I am using. I can't seem to see anything in the API on how to set...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

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.