how to customize vAxis gridlines become dash with google API - css

Question

I'm trying to customize vAxis gridlines become dash. But, it didn't run very well, everytime I change stroke-dasharray value in css it still blur.
please, is someone know how to change vAxis gridline into dash?
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
var options = {
width:'100%',
focusTarget: 'category',
backgroundColor: 'transparent',
chartArea: {
left: 20,
top: 10,
width: '100%',
height: '70%'
},
bar: {
groupWidth: '70%'
},
hAxis: {
textStyle: {
fontSize: 9,
color:'#929496'
}
},
vAxis: {
baselineColor: '#e6e6e6',
gridlines: {
color: '#e6e6e6',
count: 9
},
textStyle: {
fontSize: 9,
color:'#929496'
}
},
legend: {
position: 'bottom',
textStyle: {
fontSize: 9,
color:'#929496'
}
},
animation: {
duration: 300,
easing: 'out',
startup: true
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
#chart_div svg > g:nth-child(3) > g:nth-child(2) > g:first-child rect{
fill: none;
stroke-width: 1;
stroke: #ddd;
stroke-dasharray: 5 5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>