Border-radius и вложенные элементы?

Question

[Сева]

<nav class="main-menu">
	<ul>
		<li class="search"></li>			
	</ul>
</nav>

.main-menu {
	width: 100%;
	height:  34px;
	border-radius: 8px;
	background-color: #252525;
	margin-top: 30px;
	> ul {
		margin: 0;
		> li {
			display: block;
		}
		.search {
			width: 40px;
			height: 34px;
			background-color: #ffcc00;
		}
	}
}

Как победить? Что я делаю неправильно?

Answer 1

[Сева]

В итоге решил установкой для .main-menu { border-radius: 12px; }, a для .search { border-radius: 8px 0 0 8px; }

Костыль, конечно, но хоть не видно.

Answer 2

[Александр Вульф]

Боюсь, что никак. Сам долгое время искал решение этой проблемы. Пришлось смириться :)

Answer 3

[Alexander Mischuk]

.main-menu и .search имеют оба фон, но радиус почему-то задается только для родителя.
Элементам списка тоже нужно указывать радиус.

li:first-child{border-top-left-radius: 8px; border-bottom-left-radius: 8px;}
li:last-child{border-top-right-radius: 8px; border-bottom-right-radius: 8px;}