Можете ли вы изогнуть или закруглить только верхние углы окна в html?
Пожалуйста, есть ли код для округления только верхних углов div? Я пытаюсь создать карту, и вот код:
<div id = "card1">
<div id = "card1i"></div>
</div>
Вот css:
#card1 {
border-radius: 2%;
width: 250px;
height: 250px;
box-shadow: 0 10px 20px rgba(0,0,0,0.80);
}
В карточке я хочу добавить заголовок, который будет иметь другой фон, поэтому я добавил это:
#card1i {
width: 250px;
height: 50px;
background-color: rgb(212, 202, 202);
}
Но добавление второго div (card1i) для заголовка удаляет слегка закругленные верхние углы исходной карточки (card1). Если я попытаюсь добавить радиус границы ко второму элементу div (card1i), который является заголовком с другим цветом фона, нижние углы также станут круглыми, чего я не хочу. Пожалуйста, есть способ сделать только верхние углы второго div закругления, или есть совершенно другой способ сделать эту карту?
делать лучше в пикселях для двух контейнеров. - border-top-right-radius: 20px; border-top-left-radius: 20px;
Ответы 1
Вы можете использовать border-top-right-radius и border-top-left-radius. Исследуйте радиус границы в w3schools, вы можете получить множество других свойств CSS, которые можно использовать.
используйте это:
border-radius{10px,10px, 0 ,0}