Border-radius Property in CSS

This CSS property is supported in IE9+, Firefox, Chrome, Safari, and Opera. Border radius allows the developer to insert and define how rounded the border corners are in the div, span and other tag. Border-radius property is a shorthand to set the four properties border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius. To understand these four properties, follow the steps bellow.

Putting border radius in all corners

The code bellow will show us how to insert border radius in all corners, copy the code bellow and save it as index.html.
  1. <style>
  2. #all {
  3. border: 1px solid #000;
  4. width: 100px;
  5. height: 100px;
  6. padding: 5px;
  7. float: left;
  8. margin-right: 5px;
  9. border-radius: 20px;
  10. }
  11. </style>
  12. <div id="all">Border-radius Property</div>

Putting border radius in top left corner

The code bellow will show us how to insert border radius in top left corner, copy the code bellow and save it as index.html.
  1. <style>
  2. #topleft {
  3. border: 1px solid #000;
  4. width: 100px;
  5. height: 100px;
  6. float: left;
  7. padding: 5px;
  8. margin-right: 5px;
  9. border-top-left-radius: 20px;
  10. }
  11. </style>
  12. <div id="topleft">Border-radius Top Left Property</div>

Putting border radius in top right corner

The code bellow will show us how to insert border radius in top right corner, copy the code bellow and save it as index.html.
  1. <style>
  2. #topright {
  3. border: 1px solid #000;
  4. width: 100px;
  5. height: 100px;
  6. float: left;
  7. padding: 5px;
  8. margin-right: 5px;
  9. border-top-right-radius: 20px;
  10. }
  11. </style>
  12. <div id="topright">Border-radius Top right Property</div>

Putting border radius in bottom right corner

The code bellow will show us how to insert border radius in bottom right corner, copy the code bellow and save it as index.html.
  1. <style>
  2. #bottomright {
  3. border: 1px solid #000;
  4. width: 100px;
  5. height: 100px;
  6. float: left;
  7. padding: 5px;
  8. margin-right: 5px;
  9. border-bottom-right-radius: 20px;
  10. }
  11. </style>
  12. <div id="bottomright">Border-radius Bottom right Property</div>

Putting border radius in bottom left corner

The code bellow will show us how to insert border radius in bottom left corner, copy the code bellow and save it as index.html.
  1. <style>
  2. #bottomleft {
  3. border: 1px solid #000;
  4. width: 100px;
  5. height: 100px;
  6. float: left;
  7. padding: 5px;
  8. margin-right: 5px;
  9. border-bottom-left-radius: 20px;
  10. }
  11. </style>
  12. <div id="bottomleft">Border-radius Bottom left Property</div>

Add new comment