Как реализовать не стандартные (обрезанные) границы в блоке,за которым имеется цветной фон?
jsfiddle.net/petroveg/dL91e497
Обращаем внимание на связанные величины.
Вот вам ещё немного магии codepen.io/cleric/pen/oDsbh
Скруглённые края. 20px — связанная величина.
Сложить два дива: один без бордера сверху, а второй только с бордер-топ и бордер-райт (ограничить ширину и спозиционировать в верхний правый угол).  Вот такая идея.