Use border-radius Property to Give Your Boxes Rounded Corners
By Stephen Bucaro
Use border-radius Property to Give Your Boxes Rounded Corners
Previous to CSS3 (Cascading Style Sheets Version 3) it was difficult to create a
webpage element with round corners. You had to use special "web-kits" or go
totally graphic. However, now the CSS3 border-radius property allows
us to make round corners with ease. The border-radius property works
with Internet Explorer version 9 and higher, Google Chrome version 5 and higher,
and Firefox version 4 and higher.
Example 1. Basic rounded corners.
#rounded_1
{
border-radius: 25px;
border-style: solid;
width: 200px;
padding: 10px;
}
<p id="rounded_1">Bill of Rights Amendment I
Congress shall make no law respecting an
establishment of religion, or prohibiting the free
exercise thereof; or abridging the freedom of
speech, or of the press; or the right of the people
peaceably to assemble, and to petition the
Government for a redress of grievances.</p>
Bill of Rights Amendment I Congress shall make no law respecting an establishment of religion,
or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press;
or the right of the people peaceably to assemble, and to petition the Government for a redress
of grievances.
Example 2. Rounded corners with background color.
#rounded_2
{
border-radius: 25px;
background: #b2dbff;
width: 200px;
padding: 10px;
}
Bill of Rights Amendment I Congress shall make no law respecting an establishment of religion,
or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press;
or the right of the people peaceably to assemble, and to petition the Government for a redress
of grievances.
Example 3. Rounded corners with background image.
#rounded_3
{
border-radius: 25px;
border-style: solid;
background: url(images/united_states.png);
width: 200px;
padding: 10px;
}
Bill of Rights Amendment I Congress shall make no law respecting an establishment of religion,
or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press;
or the right of the people peaceably to assemble, and to petition the Government for a redress
of grievances.
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
