CSS – Rounded Corner with shadow

Target Audience : Web Developers

Hello, web developers!

Here I would like to tell you how to make the round corner with shadow for banners or any other components of html.

Look the code below:

-moz-border-radius-bottomright: 14px;
-moz-border-radius-bottomleft: 14px;
-web-border-radius-bottomright: 14px;
-web-border-radius-bottomleft: 14px;
-webkit-border-radius-bottomright: 14px;
-webkit-border-radius-bottomleft: 14px;
border-bottom-right-radius: 14px;
border-bottom-left-radius: 14px;
-moz-box-shadow: 0 0 25px #6C6C6C;
-webkit-box-shadow: 0 0 25px #6C6C6C;
box-shadow: 0 0 25px #6C6C6C;

For Example, if i am going to apply it for an image, then i should have the above code in my css as,

#img{
    -moz-border-radius-bottomright: 14px;
    -moz-border-radius-bottomleft: 14px;
    -web-border-radius-bottomright: 14px;
    -web-border-radius-bottomleft: 14px;
    -webkit-border-radius-bottomright: 14px;
    -webkit-border-radius-bottomleft: 14px;
    border-bottom-right-radius: 14px;
    border-bottom-left-radius: 14px;
    -moz-box-shadow: 0 0 25px #6C6C6C;
    -webkit-box-shadow: 0 0 25px #6C6C6C;
    box-shadow: 0 0 25px #6C6C6C;
}

Now in html,

<html>

<head>

<title>Rounded Corner with shadow</title>

</head>

<body>

<img id=”img” src=”banner.jpg” alt=”banner” width=”500px” height=”200px”/>

</body>

</html>

And run the html, You will get a banner which will have rounded corner with shadow…

Try it and enjoy……

Permanent link to this article: https://blog.openshell.in/2011/05/css-rounded-corner-with-shadow/

Leave a Reply

Your email address will not be published.