You can also create the elliptical corners displayed in the following demonstration:
HTML file: | Displayed by browser: |
---|---|
<style>
#rcorners7 { border-radius: 50px/15px; background: #8AC007; padding: 20px; width: 200px; height: 150px; } #rcorners8 { border-radius: 15px/50px; background: #8AC007; padding: 20px; width: 200px; height: 150px; } #rcorners9 { border-radius: 50%; background: #8AC007; padding: 20px; width: 200px; height: 150px; text-align: center; } </style> <body> <p id="rcorners7">Rounded Corners #7 <br /> <br />Elliptical border using border-radius 50px/15px</p> <p id="rcorners8">Rounded Corners #8 <br /> <br />Elliptical border using border-radius 15px/50px</p> <p id="rcorners9">Rounded Corners #9 <br /> <br />Percentage is useful to create circle or elipse shapes, or whenever the border radius needs to correlate to the element's width.</p> </body> |
Rounded Corners #7
Rounded Corners #8
Rounded Corners #9
|
Note: The values that have slash-separated values can have a space-separated value as well, like "5px 10px" (horizontal radius [space] vertical radius), which behaves like a slash-separated value in shorthand.