Last Updated: February 25, 2016
· 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 =

The code is really easy to use, for example using border-radius:

div.border {
    border:1px solid #000; 
/*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;
/*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 a tip