CSS3 Border-Radius - Elliptical Corners

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

Elliptical border using border-radius 50px/15px

Rounded Corners #8

Elliptical border using border-radius 15px/50px

Rounded Corners #9

Percentage is useful to create circle or elipse shapes, or whenever the border radius needs to correlate to the element's width.

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.

Back button Table of Contents Next button