<div class="box1">
    <div class="box2">黄色のbox2を、box1に対して、幅を50%、高さを50%にしたらこうなるよ</div>
  </div>
  <div class="box3"></div>
  <div class="box4"></div>
  <div class="box5"></div>
.box1 {
  background: skyblue;
  width: 200px;
  height: 200px;
  border: 2px solid blue;
  margin: 0 0 20px;
}

.box2 {
  background: yellow;
  width: 50%;
  height: 50%;
  overflow: scroll;
  border: dashed red;
  padding-top: 20px;
  padding-left: 40px;
}

.box3 {
  background: red;
  width: 100px;
  height: 100px;
  border-right: 5px double blue;
  border-left: 5px double blue;
}

.box4 {
  background: green;
  width: 100px;
  height: 100px;
  border: 10px dotted black;
  border-bottom: none;
 }

 .box5 {
   background: cyan;
   width: 100px;
   height: 100px;
   border: 10px ridge;
   border-radius: 10px;
 }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.