The technique documented at http://www.456bereastreet.com/archive/200505/transparent_custom_corners_and_borders/

would probably work quite well for doing resizable four-corner portlets. It uses javascript to insert the extra required DIVs, which I think would allow this technique to be adapted to Plone without making big changes to the templates.

Haven't tried it myself, though.

Hi Jon,

The technique that you point to is very interesting. Actually I think it would not require any template change either because Plone supports registration of custom Javascript files upon installation of a skin.

I'll see if I can find some free time to try it out.

If you're happy for your round corners to only work in Mozilla/Firefox/Camino and the next (but not current) version of Safari, you can do this much more easily with CSS3.

-moz-border-radius-topleft: 8px; -moz-border-radius-topright: 8px;

works in mozilla based browsers now, and it's valid CSS - you're allowed to use proprietary extensions if they start with a -dash like that. Not all CSS validators will know this, but it's true, honest ^_^.

The final CSS3 version is likely to be: border-radius Safari nightly builds respect that now, but the release build will probably need -khtml-border-radius

In theory you can specify elliptical corners with this as well; other useful tricks also.

You can see this in use at http://www.siggraph.org CSS at http://www.siggraph.org/acm-siggraph.css

Regards,

The current version of Safari is not the only browser not supporting it at this time. Almost all browsers that don't use the Mozilla engine don't support the CSS3 method, including IE6 which represents the majority of browsers on the Internet by far. I hope IE7 will support it when that version becomes available.

like siggraph.org - IE makes only 45% of our users now. Firefox makes 30%, Safari another 20%, 2% for Camino, 1% each for Opera and Mozilla, with 1% left for assorted others. Which gives us a majority of our users (well over 150,000 unique visitors in a quiet month) on modern, standards-compliant browsers. Yay! All the Safari updates so far have been automatic and free, so I expect most of our Mac users will get CSS3 round corners pretty soon.

For those of you not fortunate enough to have our enlightened user base, I'd recommend Doug Bowman's excellent CSS Sliding Doors technique: http://www.alistapart.com/articles/slidingdoors/ This takes away the need for fixed-width columns.

Regards,

You are lucky to have such an enlightened user base :-)

For the rest of us the slidingdoors method would work on the portlets' title bar but not at the bottom of the portlets, requiring an additional HTML element which could only be added by changing the templates of all portlets.

If any of you want to take that route, you can save most of your effort in modifying templates by installing Markus Proske's excellent MagicSkin that you can find in the Products section, and customizing it as he suggests.

These new CSS features open up many possibilities for web designers.

I just took a look http://www.siggraph.org/ It does look very good on Firefox, and it does fall back nicelly on Safari and on IE, it does not look akward even though those browsers doesn't show round corners as Firefox does.

But even on browsers that don't support CSS3, CSS2 already provides two pseudo elements called :before and :after, which could also be used to add rounded borders without needing extra HTML elements to be inserted by modified templates.

And even though it is true that IE5.5 and IE6 do not support those two pseudo elements, there is a way to add HTML elements in IE through the CSS style sheet using the "expression" attribute, as exemplified in the solution documented on this page:

http://fecklessmind.com/main/5/definitive-solution-to-image-replacement

It's just a thought for those that would like to try these techniques on their pages before IE7 arrives.

By the way, IE7 beta 2 preview is already available for download at:

http://www.microsoft.com/windows/ie/ie7/default.mspx