CSS override using same name?

I'm playing around with HTML5 and CSS3. As you can see below I want a site wide <p> tag style but then in the footer I would like a <p> tag in there as well but to have a different color and no rounding.

p {
    background-color: #1a315f;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 1px solid #000;
    padding: 10px;
    color:#ffffff;
    text-align: center;
    box-shad开发者_如何学编程ow:5px -5px 10px #000000;
}

footer {
    width:100%;
}

footer p{
    background-color: #FEAF48;
    display: -webkit-box;
    -webkit-box-orient:horizontal;     
}

As you can see in this link I get the different color, but the rounding still occurs. What do I need to change to the footer p{ so I don't get the rounding?

Try:

footer p{
    background-color: #FEAF48;
    display: -webkit-box;
    -webkit-box-orient:horizontal;     
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
}

add this footer p {-moz-border-radius: 0; -webkit-border-radius: 0; }