This property add rounded corners to an element. e.g
border-radius: 5px If one value is set, this radius applies to all 4 corners.
border-radius: 5px 10px If two values are set, the first applies to top-left and bottom-right corner, the second applies to top-right and bottom-left corner
border-radius: 5px 10px 15px If you set three values then it will apply top-left, (top-right and bottom-left) and bottom right
border-radius: 5px 10px 15px 20px It will set top-left, top-right, bottom-right and bottom-left
border-radius: 5px/25px;
border: 2px solid #563d7c;
width: 100px;
height: 100px;
display: block;border-radius: 50%;
border: 2px solid #563d7c;
width: 100px;
height: 100px;
display: block;border-radius: 20% 0 0 20%;
border-left: 5px solid #563d7c;
width: 200px;
height: 100px;
display: block;
background:#eee;border-radius: 0 20% 20% 0;
border-right: 5px solid #563d7c;
width: 200px;
height: 100px;
display: block;
background:#eee;