Put round corners on your portlets

Plone has a CSS file named portlets.css that has 4 css classes (.portletTopLeft, .portletTopRight, .portletBottomLeft and .portletBottomRight) that you can use in your skin to put 4 images in the corners of the portlets to make them round.

Imagine you are designing your skin and you get into something like this and now you want to round the corners of the portlets:

Firstly you need to create the 4 corner images, like these:

Then, you need to add the CSS code:

.portletHeader,
.portletFooter,
.lastItem {
    position: relative!important;
}


.portletTopLeft {
    background: transparent url(thetopleftimagename.gif) top left no-repeat;
    position: absolute;
    height: 8px;
    width: 8px;
    border: none;
    left: 0px;
    top: 0px;
}

.portletTopRight {
    background: transparent url(thetoprightimagename.gif) top right no-repeat;
    position: absolute;
    height: 8px;
    width: 8px;
    border: none;
    top: 0px;
    right: 0px;
}

.portletBottomLeft {
    background: transparent url(thebottomleftimagename.gif) bottom left no-repeat;
    position: absolute;
    height: 8px;
    width: 8px;
    border: none;
    bottom: 0px;
    left: 0px;
}

.portletBottomRight {
    background: transparent url(thebottomrightimagename.gif) bottom right no-repeat;
    position: absolute;
    height: 8px;
    width: 100%;
    border: none;
    bottom: 0px;
    right: 0px;
    margin-right: 0px;
}

Note: the 8px value used in height and width depends on your images size, in this example i am using images of 8×8px size.

This code will make portlets look like this:

It is possible that this may not work with portlets from certain add-on products, in which case you should verify that the templates of those portlets contain:

<span class="portletTopLeft"></span>
<span class="portletTopRight"></span>
<span class="portletBottomLeft"></span>
<span class="portletBottomRight"></span>

We hope you find this helpful.