Making elements round or circles

Rounding the corners of elements, or making the elements circular, can give a site page a little more style that squares and 90º angles.

First, it's important to know that, while rounding corners can be done on many elements, you may need to make other adjustments. For example, a text element with a white background, on a white page, will not noticeably change when rounding the corners of the text element. If the text element is given a background color different from the page background, the rounded corners will appear, but you may need to make adjustments to the text so it properly fits inside the new, rounded corners.

To give an element rounded corners
This works best with images and buttons.

1. Select the element
2. Select Background & Border
3. Under Border Radius, enter a value in pixels for Top, Bottom, Right, and Left
   • To create the same rounding at each corner, enter the same value in each field.
   • The value you enter will affect the amount of rounding. Lower values create less rounding, higher values create more rounding.

Some elements - like videos and maps - cannot have their corners rounded. Instead, create a border for the element, and the rounded corners will appear for the border. This can also help if trying to give a text field a rounded appearance.

To make an element a circle
This works best for images and buttons.

1. Select the image or button element
2. Select Dimension, and give the element a fixed pixel Width. Enter the same pixel value for height, Max Width, and Min Height.
3. Set all fields in Padding to 0 pixels
4. Make note of the pixel value entered in Dimension, and divide it by 2. (If Width, Height, Max Width, and Min Height are set to 200 pixels, this number is 100 pixels.)
5. Select Background & Border
6. Under Border Radius, enter the value calculated in Step 4 for Top, Bottom, Right, and Left. (Using the example above, we would enter "100 px"  in this step.) This value should be entered as pixels in all four fields.