With CSS3, you can give any element "rounded corners", by using the border-radius property. This property is actually a shorthand property for the border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius properties. Here are three examples of rounded corners:
| HTML file: | Displayed by browser: |
|---|---|
|
<style>
#rcorners1 { border-radius: 25px; background: #8AC007; padding: 20px; width: 200px; height: 150px; } #rcorners2 { border-radius: 25px; border: 2px solid #8AC007; padding: 20px; width: 200px; height: 150px; } #rcorners3 { border-radius: 25px; background: url(../html_beg/images/paper.gif); background-position: left top; background-repeat: repeat; padding: 20px; width: 200px; height: 150px; } </style> <body> <p id="rcorners1">Rounded Corners #1 <br /> <br />Rounded corners for an element with a specified background color</p> <p id="rcorners2">Rounded Corners #2 <br /> <br />Rounded corners for an element with a specified background color</p> <p id="rcorners3">Rounded Corners #3 <br /> <br />Rounded corners for an element with a specified background color</p> </body> |
Rounded Corners #1
Rounded Corners #2
Rounded Corners #3
|
