body {
  background-color:#fffdd0;
  font-family:sans-serif;
  margin:20px;
}
.basic {
  border-width:2px;
  border-style: dashed;
  border-color: red;
  min-height: 30px;
  }
.types {
  border-width:10px; 
  border-left-style: dashed;
  border-left-color: red; 
  border-right-style: dotted;
  border-right-color: black; 
  border-top-style: double;
  border-top-color: purple; 
  border-bottom-style: groove;
  border-bottom-color: orange; 
  min-height: 100px; 
  width:300px;
  }
.padding {
  border-width: 5px; 
  border-style: solid; 
  border-color: green; 
  padding:20px 50px 100px 10px;
  }
.margin {
  border-width:10px; 
  border-style: solid;
  border-color: blue;
  margin: 20px 100px 200px 50px;
  }
.nofloatbox {
  border-width: 2px;
  border-style: solid;
  border-color: blue; 
  height: 300px;
  width: 500px; 
  }
.floatleftbox {
border-width:2px;
border-style: solid;
border-color: purple; 
width: 500px; 
height: 300px; 
}
.floatrightbox {
  border-width: 2px;
  border-style: solid;
  border-color: orange; 
  width: 500px; 
  height: 300px; 
  }
.overflowbox {
  border-width: 2px;
  border-style: solid;
  border-color: green; 
  width: 800px; 
  height: 100px; 
  overflow: hidden;
  }
  .floatleft {
    float: left;
  }
  .floatright {
    float: right;
  }
  .clear {
    clear:left;
  }