Rounded Corners on Portlets using only CSS

Put the "Rounded Corners" look on your portlets using only custom CSS and three images.

  1. Introduction Why would you want to make the corners look round?
  2. Ensuring that the portlets' width remains constant For this method to work we need to ensure that the portlets' width does not change as the user manipulates the page. Here's how.
  3. Rounding the corners of the portlets' headers The corners of portlets' headers are made round with the help of a few images.
  4. Rounding the bottom corners We finish by rounding the bottom corners. This is the tough part... but it looks so easy when you look at it.
  5. Rounding Corners on Fluid-Width Portlets This technique can be used as a substitute for the previously mentioned solution, or it can be used to round corners on portlets which are not fixed width.
  6. Rounding Corners Using JQuery This jQuery plugin will easily create beautifully rounded corners. No images or obtrusive markup necessary.

All content on one page (useful for printing, presentation mode etc.)