Category Archives: CSS

Create div with rounded borders and gradient

Leave a reply

To create a HTML DIV with rounded borders and a gradient background use the folowing CSS style:

border: 1px solid #696;
color:white;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
background: #3388c9;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#3388c9), to(#256494));
background: -webkit-linear-gradient(#3388c9, #256494);
background: -moz-linear-gradient(#3388c9, #256494);
background: -ms-linear-gradient(#3388c9, #256494);
background: -o-linear-gradient(#3388c9, #256494);
background: linear-gradient(#3388c9, #256494);

On http://css3pie.com/ you can generate different CSS styles with this kind of “boxes”.

Share