Как правильно залить бокс и выгнуть углы?

[ES.^]

Доброго времени суток, у меня еще 2 вопроса:

• Как можно выгнуть углы (наружу; не загнуть)? Пример. На картинке выгнутые углы - снизу, ниже - простая зеленая линия.
• Как исправить ошибку с "заливкой" или как ее вообще правильно кодировать? Скрин навигации. Стрелкой указан текст и его коробка которая выходит за рамки белого фона (аналогично с NAUJAS TURINYS; под другие все подогнано, и все хорошо).

Код (jsfiddle)

[Sensei]

http://jsfiddle.net/c63hw6ar/1/

[Максимка]

http://jsfiddle.net/c63hw6ar/1/

правда без комментария, понятное дело, что надо изучать HTML и не только ...

 

Edited July 19, 2015 by Максимка

[Sensei]

А чего там комментировать?

Два псевдоэлемента белого цвета и со скругленными углами наложены на зеленый фон.

Можно упростить и обойтись одним http://jsfiddle.net/c63hw6ar/2/

[DivMan]

 

http://jsfiddle.net/c63hw6ar/1/

правда без комментария, понятное дело, что надо изучать HTML и не только ...

 

 

 

Изучите свойство position и всё поймёте 

[ES.^]

А чего там комментировать?

Два псевдоэлемента белого цвета и со скругленными углами наложены на зеленый фон.

Можно упростить и обойтись одним http://jsfiddle.net/c63hw6ar/2/

То что мне нужно, но этот код маленько дизайн портит и получается не совсем то что было задумано. Есть несколько проблем:

• border-bottom: 3px solid #38C071;

  в классе d_nav ul добавляет еще одну линию (снизу), но это фигня, я сам могу убрать ее.
• Коробка заполняется не полностью (заполняется не от самого верха элемента, и остается пробел снизу (убрав строку

  border-bottom: 3px solid #38C071;

  в классе d_nav ul)).
• В последнем li пропадает правый выгнутый угол (как и в вашем примере).
• Съезжают элементы которые находиться ниже (ul).

Скрины:

1-ый

2-ой

Параллельно хочу задать еще один вопрос - на скринах виден блок с картинками соц. сетей (по середине). Этот блок находиться в таблице (как и 2 других элемента). Высота таблицы - 204px, ширина у каждого блока своя (конкретно у блока соц. сетей - 311px). Размер каждой иконки: 99x100px, расстояние между иконками по горизонтали: 4px, по вертикали: 7px. Проблема в том, что из-за этого блока страдают другие (которые находятся в этой же таблице) - их высота становиться 208px. Сам же, блок соц. сетей, остается такого же размера, но при изменении масштаба - иконки выпадают за борт (не знаю, может так только в chrome). Как это подправить? Код: jsfiddle.