Блог

Главная - Вопросы по программированию - Как создать прямоугольник с закругленными углами вверху, но нормальными углами внизу?

Как создать прямоугольник с закругленными углами вверху, но нормальными углами внизу?

#html #css #rounded-corners

#HTML #css #закругленные углы

Вопрос:

У меня следующий код:

 <div class="box"> 
 <div class="title">
  <a>Title</a>
 </div>
 <div class="content">
  <a>Content</a>
 </div>
</div>

Я хотел бы оформить его с помощью CSS и получить следующий результат:

Прямоугольник с закругленными углами

Однако я не знаю, как оформить часть «заголовок» так, как я хочу. Верхние углы должны быть закруглены, а нижние — нет. Наоборот для части «содержимого».

Как я могу это сделать?

Комментарии:

1. Я бы сказал, go go gadget google

Ответ №1:

Вы можете указать радиус каждого угла индивидуально с помощью:

 border-top-left-radius: 24px;
border-top-right-radius: 24px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;

Или объединить это в один…

 border-radius:24px 24px 0 0;

(значения указаны по часовой стрелке от верхнего левого угла)

Здесь есть генератор — http://border-radius.com / — но это должно быть достаточно легко сделать без него.

Ответ №2:

Вы можете использовать этот веб-сайт для создания css для закругленных углов.

http://border-radius.com

По сути, вам просто нужно указать, для какого угла вы хотите установить радиус бодрера, например: border-top-left-radius: 5 пикселей