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;
-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……