Rounded corners and drop-shadows

Rounded corners and drop-shadows are used throughout most websites in the Ubuntu web universe. Make sure you are consistent with the guidelines.

Figure 1: A box on ubuntu.com with rounded corners and drop-shadow

Rounded corners

Use the following CSS to apply rounded corners on a container element:

div {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}

Use the following CSS to apply a drop-shadow to a container element:

div {
-webkit-box-shadow: 0 2px 2px 0 #C2C2C2;
box-shadow: 0 2px 2px 0 #C2C2C2;
}