Div background-image not showing properly

Hi,

I’m using WordPress at https://thinkrasta.com/home. On the homepage, there’s a grid of ‘other posts’, below the most recent post.

I’m trying to add a dotted border around each of these posts,and since you can’t change the spacing between dots if you use border-style:dotted, I’m trying to use my own background image as a border.

I’m pretty sure that I’m using the correct dimensions for the bg-image. Still, only the top and left sides of the border are showing. Can someone please help me out with this?

Here’s the CSS for the div:

.item {
float:left;
margin-bottom:16px;
position:relative;
margin-right:16px;
padding:10px;
width:295px;
height:300px;
background:#FFF url(https://thinkrasta.com/images/boxborder.png) no-repeat;
-webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1); }

Thanks!