If you specify only one value for the border-radius property, this radius will be applied to all 4 corners. However, you can specify each corner separately if you wish. These are the rules that apply:
Here are three examples with various values given, and all using the same specified background color:
| HTML file: | Displayed by browser: |
|---|---|
|
<style>
#rcorners4 { border-radius: 15px 50px 30px 5px; background: #8AC007; padding: 20px; width: 200px; height: 150px; } #rcorners5 { border-radius: 15px 50px 30px; background: #8AC007; padding: 20px; width: 200px; height: 150px; } #rcorners6 { border-radius: 15px 50px; background: #8AC007; padding: 20px; width: 200px; height: 150px; } </style> <body> <p id="rcorners4">Rounded Corners #4 <br /> <br />Rounded corners using four different values for each corner in this order: top-left, top-right, bottom-right, bottom-left</p> <p id="rcorners5">Rounded Corners #5 <br /> <br />Rounded corners using three values: 1st value=top-left, 2nd=top-right and bottom-left, 3rd=bottom-right </p> <p id="rcorners6">Rounded Corners #6 <br /> <br />Rounded corners using two values: 1st value to top-left and bottom-right, 2nd to top-right and bottom-left</p> </body> |
Rounded Corners #4
Rounded Corners #5
Rounded Corners #6
|
