Round Corners and Border-Radius in CSS3
The border-radius property is one of those CSS techniques that has been experimental for a few of the last releases of CSS.
It is now supported by the latest versions of all major browsers.
You can use it with or without adding a border to your page element.
You can use it on all or selected corners.
Use ems or pixels for the value of the radius.
Experiment.
Code and Examples
All 4 Corners
border-radius: 10px
Top corners
border-radius: 20px 20px 0 0
Bottom corners
border-radius: 0 0 30px 30px
No Border with Inset Box shadow
border-radius: 25px; box-shadow: 5px 5px 10px #000 inset
The Circle (Fixed Width)
width: 200px; height: 200px; border-radius :90%; border:solid #000 2px
See Also: Box Shadow
Free Tools and Resources
Free Bullet Images, WingDings and WebDings
🔵 🔶 😀 🎈 🐝 🏀 👉 👲 💡 🍅
Have you tried our NEWEST template kit with scrolling columns? Download Template Kit #601 - 4 Page Kit or Test Drive It!