Currently, the links at the top of my website look like this:
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.
