Saturday, November 15, 2008

Rounded corners and Shadows using CSS3



This method is currently working for firefox and safari browsers. The code is given bellow


<style>
.shadow{
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
min-height:0px;
min-width:0px;

border: 8px solid #888;
background-color: #888;
-moz-border-top-colors: #fff #eee #ddd #ccc #bbb #aaa #999 #888;
-moz-border-bottom-colors: #fff #eee #ddd #ccc #bbb #aaa #999 #888;
-moz-border-left-colors: #fff #eee #ddd #ccc #bbb #aaa #999 #888;
-moz-border-right-colors: #fff #eee #ddd #ccc #bbb #aaa #999 #888;
}
.inbox{
padding:5px;
background-color:white;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
position:relative;
top:-3px;
left:-3px;
}
</style>
<div class="shadow">
<div class="inbox">
your text goes here
</div>
</div>



No comments:

Post a Comment