Plone's standard skin is a little bit... "boxy", with "pointy" corners.

This is so because it is a minimal skin designed to be fast and easily customizable.

But... how do we get rid of some of this "boxyness"?

Why don't we put round corners on the portlets? That's a good place to start, it's an approach that has been taken by many people to make the look of their website easier on the eyes and more original.

Traditionally this has been implemented in Plone by making skins that change the templates that generate the portlets, so that additional HTML elements can be positioned at the corners of portlets, so that these corners look rounded thanks to images of rounded corners, as you would imagine.

This method works well, sites do gain more personality and become less "Plone-like", but...

It has one drawback: When it's time for you to upgrade your website to a new Plone version, you must go through the templates of the new version, manually compare them to those of the previous version, and make sure that the customized templates that you are using to make the round corners do not need to be customized again.

Not very easy to maintain.

The solution to this sort of problem is to do the entire skin only on web standard Cascading Style Sheets (CSS) and without changing any base Plone template or any other element that might be modified from one version of Plone to the next.

The purpose of this Tutorial is to show you how you can round the corners of your portlets using only CSS. This tutorial is meant for Plone 2.1.x, even though it should work just as well in Plone 2.0.x.

In order to implement this method we must make 1 (one) compromise:

• Portlets must become fixed width. If they were allowed to change width the right hand corners would move away from the corner, using this method. To prevent this from happening we would need to manually modify every portlet template in order to add one more corner HTML component for the right bottom corner of every portlet, which goes against our purpose. We want to do the whole thing without modifying templates. For that to work our portlets must become fixed width.
  

If you feel that this is a compromise that you are willing to make, this is what your portlets will look like at the end of this tutorial:

Now, let's see on the following pages how we can accomplish this.