This code will allow the creation of a rounded corner DIV box. The rounded corner can be any size and any corner. It will also allow a drop shadow of any colour to be added to the DIV.
CSS
div.box1 {
float: left; position: relative;
height: 150px; width: 200px;
margin: 0 0 0 0; padding: 5px ;
border: 1px solid #ccc;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 20px;
box-shadow: 10px 10px 5px #888888;
}
This is used for a hover effect
div.box1:hover {
background: #E3C8E8;
border: 1px solid #906;
}
Link Styling for each box
div.box1 a:link,
div.box1 a:visited
{ color: #F00; text-decoration: none; }
div.box1 a:hover { color: #F00; text-decoration: underline; }
div.box1 a:active { color: #F00; text-decoration: none; font-weight: bold; }
Setting can be changed for different size boxes or different colour backgrounds and borders.