Changing Border Images?

I’m looking for a way to replace the menu border that comes with theme with my own image in the Child theme CSS.

I tried changing the URL of this border in the child theme/edit CSS portion, but it does not work. Here’s the code I used:

nav#main-nav > ul:before, nav#main-nav > ul:after  {
    content: '';
    width: 100%;
    height: 6px;
    display: block;
    background: url("images/menu-border2.png") repeat-x top left;
}

However, when I change it in the parent css file, it works fine. What would I do to make the child theme CSS override the parent theme CSS?

Additionally, if I wanted to create a simple dotted border without an image in a different color, how would I do that? Please see my website for a complete picture: simplyfitspired.com

Your help is much appreciated!