Creating shadow and round border (border radius) is quite useful to decorate your site template, and it is easy to do that. You can see how it looks in blockquote and ads banners from this site for the example. Like the previous post how to create shadow effect on links it takes only one step to create it.
For specific example, I'll give example how to create shadow and round border in blockquote.
Open Your CSS from your site template and replace the existing code or append with the CSS style below (you can customize the size, color, etc to match your template later):
If you prefer to use separate style of shadow and round border, here is the code you can use:
For specific example, I'll give example how to create shadow and round border in blockquote.
blockquote{width:90%;background:#FFF;padding:5px 15px; margin:5px;color:#555;Save your template and you'll see the changes of your blockquote like the one used in this blog (if you don't change anything), but offcourse you can customize it yourself.
line-height:150%;font-size:12px;border:1px solid #eee;
-webkit-box-shadow:8px 8px 16px 4px rgba(0,0,0, 0.4);
-moz-box-shadow: 8px 8px 16px 4px rgba(0,0,0, 0.4);
box-shadow: 8px 8px 16px 4px rgba(0,0,0, 0.4);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;}
If you prefer to use separate style of shadow and round border, here is the code you can use:
/*CSS code to create box shadow*/
border:1px solid #eee;
-webkit-box-shadow:8px 8px 16px 4px rgba(0,0,0, 0.4);
-moz-box-shadow: 8px 8px 16px 4px rgba(0,0,0, 0.4);
box-shadow:8px 8px 16px 4px rgba(0,0,0, 0.4);
/*CSS code to create round border*/Important, this code can also be used for any other part or your template. Not only blockquote, but also image border, banners, image caption and so on.
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;}