CSS3 Border Radius and Box Shadow effects
I created a video tutorial a little while ago to show some examples of the CSS3 Border Radius and Box Shadow effects, along with how to implement the very simple code.
Take a look at the video here = http://www.youtube.com/watch?v=4qibiNinF1E
The code is really easy to use, for example using border-radius:
div.border {
border:1px solid #000;
border-radius:5px;
}
/*This will add a 5px curved border to all corners*/
To ensure that the effect is picked up by all supporting browsers, the only issues with IE (surprise surprise! - IE9 will work fine)
div.border {
border:1px solid #000;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
/*So I've used browser specific css tags but you could just use them in separate stylesheets if that how you'd prefer. */
Remember that you need to use the standard CSS border:1px solid #000; as well as border-radius:5px; etc for the effect to work.
Check out the video for a demo of the box-shadow code
Enjoy :)
Written by Harry Finn
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Css
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#