Last Updated: February 25, 2016
·
2.135K
· harryfinn

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 :)

Have a fresh tip? Share with Coderwall community!

Post
Post a tip