The current version of EZRound generates HTML for table based layouts.

However this does not mean that you can not use EZRound to create CSS Rounded Corner designs.  By following a few simple rules for generating the design in EZRound and using this excellent tutorial by SitePoint, you can create your own CSS Rounded Corner designs as shown in these examples:

Click here to view this example.

Click here to view this example.

Click here to view this example.

Click here to view this example.

Click here to view this example.

About these examples

Note: The HTML and CSS for these examples was NOT automatically generated by EZRound.  You have to hand code to get these effects.

The CSS technique used here is based on this tutorial by Trenton Moss, published at SitePoint.

Keep in mind that the Sitepoint article and these examples use just one technique available among many.  You can use Google to find other methods to produce similar results.

Creating the images for your CSS design in EZRound

There are a few simple rules that you need to follow when you use EZRound to generate images that are compatible with this tutorial.

1) Do NOT use any shadows, padding or an accent border in the EZRound designer.

This tutorial uses a four image slice design to create the rounded corner effect, but the center uses CSS to set the background color.  If you use any of the features listed, you will have gaps in your design.

Here is an example of how to set the shadow and padding
(note that Shadow Density is set to 1)

Here is an example of how to set the accent band

2) Only the four corner images are used with this CSS method.  The others are not needed.

Tip: in the red design example above (with the square opposite corners), two EZRound shapes were exported.  One with all corners set to round, then another with the top set to flat. The top corner image (square) was used on both the upper left and lower right images.

3) You will need to copy the background color you use in the EZRound designer and use it in the CSS

The Table Color you use as shown here:

Gets inserted in the CSS as shown here:

4) Follow these guidelines and the steps in the tutorial

You should open one of the example links above, view the page source and then read through the tutorial at Sitepoint. Once you do then how the pieces fit together will be clear to you.

Copyright © 2003 - 2022  :: LANSRAD :: All Rights Reserved