Menu bar rounded corners

  • Resolved Progress Concepts

    (@progressconcepts)


    11 years ago

    Hi,

    I wondered if it would be possible to have the corners of the menu bar slightly rounded?

    Are you aware what the css would be to do this?

    Also, would it be possible to put a fine dividing line between menu options and set the colour? It would be nice if I could then wrap the same coloured line as an outline to the whole menu bar?

    Link to site so you can see https://www.progressconcepts.com

    Any advice very greatly received.

    Thanks.

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter Progress Concepts

    (@progressconcepts)

    By the way, I should say, I have tried the following code for the borders:-

    .main-navigation a {
border-bottom: 1px solid #888;
border-top: 1px solid #888;
border-left: 1px solid #888;
border-right: 1px solid #888;
}

    This provides the border, however there is a gap between each menu item, so I see a rectangle around each item.

    I suspect what I therefore want to know is how to remove the padding between cells?

    And also how to make the 4 corners of the full bar slightly rounded (not the individual menu buttons).

    Hope that makes it a little clearer!

    Thanks.

    Thread Starter Progress Concepts

    (@progressconcepts)

    Hi. I have done some tweaking with the CSS and come up with something I like now.

    Will close this down.

    Thanks.

    Theme Author Fruitful Code

    (@fruitfulcode)

    Great!

    For custom development and design you can contact us on our website.

    Hi! Progressconcepts! I was looking to create the exact thing. How did you achieve rounded corners for menu items?

    Thank you!

    Nevermind. Got it. For anyone looking for help on this:

    .main-navigation a {
border-radius-topleft: 10px;
border-radius-topright: 10px;
border-radius-bottomright: 10px;
border-radius-bottomleft: 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
}

    Tweak px for roundedness.

    I want to do the same thing to my website…

    To Chamm_88… do you know how to get rid of the gap between each menu item? I want to get rid of the rectangle around each item, but still have rounded edges.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Menu bar rounded corners’ is closed to new replies.