CODEWITHSUNDEEP
cssrounded-corners
Jay Diocampo
Jay Diocampo

Reputation: 11

Navigation Bar Rounded Image in CSS

I'm creating a navigation bar in CSS. The navigation bar has a background-image and I want the image to have rounded corners. I have already tried other things like -moz but nothing has worked so far. Here's my CSS:

ul{
    background-image: url(nav_bar.png); height: 60px;width: 35%;
    background-repeat: no-repeat;
    position: relative;
    margin:1;
    padding:0;
    left: 30%;
}

How can I give it rounded corners?

Thanks!

Upvotes: 1

Views: 1243

Answers (1)

Chris
Chris

Reputation: 26898

Use border-radius along with background-clipping: padding-box;. Both properties need browser-specific prefixes unless you include something like PrefixFree.

Your added CSS would look like:

ul {
    -moz-border-radius: 10px; /*increase the value to make it more round*/
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -moz-background-clipping: padding-box;
    -webkit-background-clipping: padding-box;
    background-clipping: padding-box;
}

Upvotes: 1

Related Questions