Внутреннее закругление Border плюс тень

#main { margin: 40px; height: 200px; width: 250px; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); background-color: #fff; }

Помогите решить проблему. Не получается одновременно сделать внутреннее закругление углов и нормальную тень.

Ответ

Конечно не идентично, но думаю суть ясна. Делаем имитацию вогнутой части с помощью box-shadow
body { background: url("http://www.yorkpress.co.uk/resources/images/6599017.jpg?display=1&htype=0&type=responsive-gallery")20% 10%; background-size: cover; } .wrapper { margin: 1rem; } .item { position: relative; background-color: white; width: 500px; height: 100px; margin-bottom: 25px; } .item:first-child { box-shadow: 0 -1rem 1rem rgba(0, 0, 0, 0.3); } .item:last-child { box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.3); } .item:first-child::before { content: ""; display: block; position: absolute; top: 100%; left: -0.7rem; border-top-right-radius: 60%; border-bottom-right-radius: 60%; width: 25px; height: 25px; box-shadow: 15px 0px 0 4px white; } .item:first-child::after { content: ""; display: block; position: absolute; top: 100%; right: -0.7rem; border-top-left-radius: 60%; border-bottom-left-radius: 60%; width: 25px; height: 25px; box-shadow: -15px 0px 0 4px white; } .item:last-child::before { content: ''; position: absolute; left: 1rem; bottom: 90%; background-color: white; width: 93%; height: 50px; box-shadow: 0 0 3rem black; z-index: -1; }