Bug 73956 - CSS3: add border-radius
Summary: CSS3: add border-radius
Status: CONFIRMED
Alias: None
Product: konqueror
Classification: Applications
Component: khtml renderer (show other bugs)
Version: unspecified
Platform: Compiled Sources Linux
: NOR wishlist
Target Milestone: ---
Assignee: Konqueror Developers
URL:
Keywords:
: 101491 (view as bug list)
Depends on:
Blocks:
 
Reported: 2004-02-01 13:47 UTC by S Leiber
Modified: 2013-03-26 17:27 UTC (History)
7 users (show)

See Also:
Latest Commit:
Version Fixed In:


Attachments
border-radius test (485 bytes, text/html)
2009-02-01 22:27 UTC, Neil Skrypuch
Details
A screenshot from the above test case (45.09 KB, image/png)
2009-02-02 04:05 UTC, Neil Skrypuch
Details

Note You need to log in before you can comment on or make changes to this bug.
Description S Leiber 2004-02-01 13:47:52 UTC
Version:            (using KDE Devel)
Installed from:    Compiled sources
Compiler:          gcc 3.3.2 
OS:          Linux

Hi!

Are we planning to implement css3 in khtml?
I whant for example have the css commands border-radius, ...
And for compatibility to mozilla we implement the moz-border-radius, too.
To test the mozilla version view http://www.sam-i-am.com/work/sandbox/css/roundedCorners.html!
I think it was a verry good funktion for layouts for sides!
thx.

Bye,
   Jsven007
Comment 1 Sashmit Bhaduri 2004-02-01 23:27:58 UTC
that looks like a mozilla css3 extention?
Comment 2 S Leiber 2004-02-02 07:23:12 UTC
In Mozilla we have a moz-border-radius like it was used on the side I post. In css3 we have a border-radius definated, that I think was the same!
Comment 3 Kai Lahmann 2004-08-20 04:18:01 UTC
it's the same, yes. Only called -moz-, because it's still only a working draft.
Comment 4 Allan Sandfeld 2004-12-21 01:32:10 UTC
I studied this to evaluate possible implementation. There are several problems. First the Mozilla implementation doesnt follow the specification. Second it is entirely impossible to follow the spec., since it is not integrated with the border features of CSS2. 

For instance which colour or style should be used for the top-left corner: The colour and style of the top border, or those of the left border?

Other issues include clipping. The spec. specifies that the background should be clipped at the rounded border, but what about box contents? If the padding is 0 a rounded corner will inevitably intersect content.
Comment 5 Allan Sandfeld 2005-03-14 19:31:19 UTC
*** Bug 101491 has been marked as a duplicate of this bug. ***
Comment 6 S. Burmeister 2005-04-19 17:37:34 UTC
Has anyone of those people who are competent in this matter contacted the people responsible for the specifications. If there are issues to be improved they would  appreciate it, I think.
Implementing this would definitely give a lot of KDE's applications a nicer look. Amarok already uses frames with round borders (is that done with pictures?). Kmail's header-section could need the the round borders as well as many other sharp edged corners e.g. in kopete or KDE documentation.

What about implementing the round corner, but not mention it as CSS feature yet. This way round corners are available to applications and if the specifications get more detailed, the basic functionality is already available and can be used to develop it further.
The basic functionality would simply draw half the radius in the colour of the first border and the second half of the radius in the colour of the other border. If that is too complicated, one could simply make a choice. As most frames consist of the same colour, this would not matter anyway.
Comment 7 Kae Verens 2005-05-07 22:22:51 UTC
Hi guys. I'm working on some algorithms to hopefully replace the Firefox code for borders. I'm writing them in JavaScript at the moment, as it's what I'm used to.
  Once the code is complete, it should be reasonably simple to convert to another language, so you could use the same algorithms to solve the KDE border-radius code if you wanted.

See http://verens.com/demos/borders/test.html for an example, using plain CSS3

I'm pretty close to completing the solid border code. Once that's finished, I'll be adapting that code to also solve double borders, then dashed (the tricky one :) ).

I should have the algorithms completed before the end of the month. I'll be tackling a conversion to Firefox code myself, followed by KDE, but if you want to tackle it yourself, I'll announce when I'm finished.
Comment 8 Allan Sandfeld 2005-05-08 20:29:38 UTC
Very cool stuff! 
Are you going to add anti-alias? 
Have you seen any descriptions for dealing with multiple colors like you do in the example?
Comment 9 Kae Verens 2005-05-08 21:08:13 UTC
Allan, yes.
  If you view the test page in Firefox, you can see the anti-aliasing in effect. I'm using the CSS "opacity" style for the JavaScript, but I'm not sure how to get that working in Konqueror, so Konqueror does not display the test page as it is supposed to be displayed. (Ironically, I can get it /almost/ working in IE on Windows ;) )
  At the moment, anti-aliasing is correct for straight borders, beveling and 1-pixel height sections of curves. I will have perfect anti-aliasing tomorrow (was busy gardening today :) ).
  When translated to the Firefox and KHTML, I think antialiasing will be done using alpha-values. Firefox's API has an RGBA() structure for colours. I'm not sure how KHTML handles it (must admit, I haven't looked yet), but my guess is that there will be no problems applying the same anti-aliasing methods when the time comes.
Comment 10 Kae Verens 2005-05-08 21:21:27 UTC
As for the question of how to address multiple colours - I based the method I use on the existing Mozilla code.
  The W3C proposal does not mention anything about colours, so I guess we're in fresh territory here.
  The mozilla method (for the top-left corner, eg, the colour border is coloured using the left colour up until 45 degrees, and then by the top colour) is the easiest "correct-looking" method.
  A "more-correct" method might be tho gradiate the colour from one side to the other, but I'm not going to touch that one - it's a headache for some poor sucker in the future :)

Back on the anti-aliasing question - I haven't touched anti-aliasing for the background image/colour, in cases where the image is visible to the outer-edge (in dashed lines, eg, or with transparent/0px borders). Again, that's a job for the future (I'm concentrating purely on the borders at the moment).
Comment 11 Neil Skrypuch 2008-10-13 00:34:48 UTC
Has there been any movement on this? Konqueror 4.1.2 still doesn't seem to support border-radius, and there's been 3+ years of silence here.
Comment 12 Neil Skrypuch 2009-02-01 22:27:08 UTC
Created attachment 30842 [details]
border-radius test

It looks like Konqueror 4.2.0 supports border-radius now (although only as -khtml-border-radius). However, the behaviour with large radii and >1 border colour is rather ugly. See the attached test case.
Comment 13 Neil Skrypuch 2009-02-02 04:05:18 UTC
Created attachment 30846 [details]
A screenshot from the above test case

Here's what I'm seeing for the large border radii... nevermind the small delay, I became substantially distracted by bug 181072 in the process of taking the screenshot.
Comment 14 Gérard Talbot (no longer involved) 2010-03-30 05:45:32 UTC
In december 2009, the CSS3 Backgrounds and Borders Module became a candidate recommendation. When a spec becomes a candidate recommendation, browser manufacturers/implementors should drop their prefix:

"
The CSS Working Group recommends that experimental implementations of features in CSS Working Drafts use vendor-prefixed property or value names. This avoids any incompatibilities with future changes in the draft. Once a specification reaches the Candidate Recommendation stage, implementors should implement the non-prefixed syntax.
"
http://www.w3.org/TR/css-beijing/#experimental

So, Konqueror should now support border-radius, not just -khtml-border-radius.

This bug is now contextually very relevant.

regards, Gérard
Comment 15 Gérard Talbot (no longer involved) 2010-04-04 06:02:34 UTC
Hello all,

I am using Konqueror 4.4.2 and testcases with border-radius are supported correctly. 

33 tests recently made public on border-radius:
http://samples.msdn.microsoft.com/ietestcenter/css3/css_harness.htm?url=./bordersbackgrounds/border-radius-style-001.htm

Konqueror 4.4.2 seem to fail only a couple of tests: test 12 and 13.

regards, Gérard
Comment 16 Gérard Talbot (no longer involved) 2010-05-14 05:21:21 UTC
A meta-testcase:
http://ie.microsoft.com/testdrive/HTML5/01BorderRadius/Default.html

Konqueror 4.4.3 passes this test.

regards, Gérard
Comment 17 Gérard Talbot (no longer involved) 2010-05-16 18:52:03 UTC
Another website with several border-radius testcases:

Table of CSS3 border-radius Compliance by Jerry Seeger
http://muddledramblings.com/table-of-css3-border-radius-compliance

At least 6 testcases fail in Konqueror 4.4.3.



Updated link on Microsoft Test Center's border-radius 33 tests:
http://samples.msdn.microsoft.com/ietestcenter/css3/css_harness.htm?url=border-radius-style-001

regards, Gérard
Comment 19 Gérard Talbot (no longer involved) 2011-01-30 23:59:29 UTC
57 tests on border-radius, box-shadow, CSS3 background properties (background-clip, background-origin, background-size, background-position, etc.):

http://samples.msdn.microsoft.com/ietestcenter/css3/css_harness.htm?url=border-radius-clip-001 (being the first test)

Konqueror 4.5.5 fails many of these tests.

regards, Gérard
Comment 20 Gérard Talbot (no longer involved) 2011-07-11 18:51:34 UTC
57 tests on border-radius, box-shadow, CSS3 background properties
(background-clip, background-origin, background-size, background-position,
etc.) (updated link):

http://samples.msdn.microsoft.com/ietestcenter/css3/css_harness.htm?type=bordersbackgrounds&url=border-radius-clip-001

Latest Konqueror version 4.6.5 fails many of these tests.

regards, Gérard