How to use this CSS on Chrome browser - html

Question

I tried to create simple date icon using CSS. Below is the code, which is working fine on Mozilla Firefox, but not working on Chrome.
Code link
How can I fix this so it works on all browsers?
HTML code:
<div class="holder">
<div class="month red">
<p>October</p>
</div>
<div class="day">
<p>22</p>
</div>
</div>
CSS code
holder {
width: 72px;
height: 84px;
position: relative;
margin: 20px;
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
float: left;
}
.month {
width: 70px;
height: 25px;
border: 1px solid rgba(0,0,0,0.25);
-webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
box-shadow: inset 0px 1px 1px 0px rgba(255,255,255,0.4);
}
.month p {
text-align: center;
color: white;
font-size: 11px;
font-weight: 600;
text-shadow: 1px 1px 0px rgba(0,0,0,0.40);
margin: 5px 0 0 0;
border-bottom: 1px dashed rgba(0,0,0,0.30);
margin: 5px 8px 0px 8px;
padding: 0 0 1px 0;
}
.day {
width: 70px;
height: 50px;
border: 1px solid rgba(0,0,0,0.25);
-webkit-border-bottom-right-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-bottomright: 6px;
-moz-border-radius-bottomleft: 6px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
background: white;
background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(247, 247, 247, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255, 255, 255, 1)), color-stop(100%,rgba(247, 247, 247, 1)));
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%,rgba(247, 247, 247, 1) 100%);
background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 0%,rgba(247, 247, 247, 1) 100%);
background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 0%,rgba(247, 247, 247, 1) 100%);
background: linear-gradient(top, rgba(255, 255, 255, 1) 0%,rgba(247, 247, 247, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f7f7f7',GradientType=0 );
box-shadow: 0px 1px 0px 0px #fff, 0px 2px 0px 0px #ccc,0px 3px 0px 0px #fff, 0px 4px 0px 0px #ccc;
}
.day p {
text-align: center;
font-size: 36px;
font-weight: 700;
color: #444;
text-shadow: 1px 1px 0px white;
margin-top: 3px;
}
.red{
background: rgb(169,3,41);
background: -moz-linear-gradient(top, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(169,3,41,1)), color-stop(44%,rgba(143,2,34,1)), color-stop(100%,rgba(109,0,25,1)));
background: -webkit-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
background: -o-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
background: -ms-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
background: linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 );
}