«Внешняя» граница-радиус в css?

Question

В настоящее время ссылки в верхней части моего сайта выглядят так:

Однако я пытаюсь «закруглить» нижние края кнопок, чтобы они выглядели так, как будто они выходят со страницы и попадают на ленту сверху.

Я знаю, что вы можете взломать его и добавить разделитель "div" с закругленными углами между каждой записью, но это будет трудно сделать, поскольку используемые границы не все из одного и того же div. Кроме того, это будет нелегко увидеть, так как мои кнопки расположены очень близко друг к другу.

CSS для «кнопки»:

.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 для «ленты»:

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

Как вы можете видеть, более толстая граница принадлежит ленте, которая растягивает длину веб-страницы, тогда как более тонкая синяя рамка является частью кнопки.

Answer 1

Ваш желаемый эффект можно создать, применив box-shadow для каждой кнопки, а 3d-эффект можно сделать более крутым, применив 3d-преобразования и атрибут perspective