Chapter 5

Chapter 5: Indestructible Boxes




The first one that you see is the Round Box, where all the corner of the box are round. Like in the first image but you can also see that I have round on some of the other places too. The second one is only a Single Rounded Corner, where only one corner is rounded. Like in the second image you see. It took me a while to get the one corner to fold.

Round Box's CSS:
body {
font-size: small;
font-family: Arial;
}

.box {
width: 273px;
background: #0FF;
height: 115px;
border-radius: 10px 14px 10px 14px;
-moz-border-radius: 10px 14px 10px 14px;
}

.box h3 {
margin: 0;
padding: 6px 8px 4px 10px;
font-size: 130%;
color: #000;
border-bottom: 1px solid #0F9;
background: #0F9;
-moz-border-radius: 10px 14px;
}

.box ul {
margin: 0;
padding: 14px 10px 14px 10px;
list-style: none;
}

.box ul li {
margin: 0;
padding: 0;
}

.container {
float: left;
color: #000;
background: #90F;
height: 85px;
width: 155px;
border-radius: 12px 14px 12px 14px;
-moz-border-radius: 12px 14px 12px 14px;
}

.desc {
margin: 0;
padding: 9px 9px 0 9px;
background: #99F;
-moz-border-radius: 12px 14px;
}

.link {
display: block;
padding: 0 9px 9px 0;
font-style: normal;
background: #90F;
}

.container a {
font-size: 130%;
color: #99F;
}

Single Rounded Corner's CSS:
ol {
width: 22 em;
margin: 0;
padding: 0;
list-style: none;
}

ol li {
margin: 0;
padding: 1em;
}

ol li.alt {
background: #06F;
height: normal;
width: normal;
border-bottom-right-radius: 2em;
-moz-border-radius-bottomright: 2em;
}


Sources that I have helped me:
http://www.css3.info/preview/rounded-border/