4

Currently, the links at the top of my website look like this:

enter image description here

However, I am trying to "round" the bottom edges of the buttons to make it look like they are coming out of the page and into the ribbon at the top.

I am aware that you can hack it and add a "separator" div with rounded corners between each entry, but this would be difficult to do seeing at the borders used are not all from the same div. Also, it wouldn't be easy seeing as my buttons are very close to each other.

The css for the "button":

.button {
    border-top: 3px solid #A1C1BE;
    border-left: 3px solid #A1C1BE;
    border-right: 3px solid #A1C1BE;
    border-bottom: 0px;
    padding: 5px 8px 5px 8px;
    margin: 0 0 -9px 0;
    border-radius: 5px 5px 0 0;
    font-size: 12px; 
    font-family: 'PT Sans', sans-serif;
    background-color: #f8f8ff;
    color: #484848;
}

css for the "ribbon":

#top-wrapper {
    border-bottom: 5px solid #A1C1BE;
    width: 100%;
    background-color: #59554E;
    padding: 10px 0 0 0;
    color: #C0C0A8;
}

As you can see, the thicker border belongs to the ribbon which stretches the length of the webpage, whereas the thinner blue border is part of the button.

  • 2
    The solution is likely to use :before and :after pseudo classes. Can you hook up a JSfiddle of your menu to play with? Cheers. – doctororange Nov 15 '11 at 05:59
  • Thanks for your help @doctororange, here's the JSFiddle http://jsfiddle.net/395Ue/ –  Nov 15 '11 at 06:39
  • 1
    I think you should read this: http://stackoverflow.com/questions/4839613/how-to-make-round-corners-to-both-inside-of-a-box-and-its-border – JohnB Nov 15 '11 at 07:02
  • Thanks for you comment @JohnB, but I'm trying to round the corners the other way. –  Nov 15 '11 at 07:48
  • [Rounded inner corners](http://kizu.ru/fun/rounded-inner-corners/) — This is solution of the problem, which I recommend to look. – Nick Sadovnikov Nov 15 '11 at 05:28
  • 1
    I appreciate the link, but the css/html code is very complicated and hard to follow without an explanation of what's going on. –  Nov 15 '11 at 05:38

1 Answers1

1

Your desired effect can be created by applying box-shadow for each button and 3d effect can be made more cool by applying 3d transforms and perspective attribute

eldos
  • 3,132
  • 3
  • 29
  • 32