0

p.one {
  width: 300px;
  border: 5px solid deeppink;
  padding: 20px;
  margin: 20px auto;
  border-radius: 80px 50px;
}

p.two {
  width: 300px;
  border: 5px solid depppink;
  padding: 20px;
  margin: 20px auto;
  border-radius: 100px;
}
<p class="one">Proin ut class Malesuada cum consequat suspendisse sed pharetra, suspendisse, ultricies. Nam vulputate faucibus. Hendrerit fringilla tortor magnis dis litora, convallis ante montes habitasse sapien Est nisl. Congue morbi torquent.</p>
<p class="two"><br><br><br></p>

У меня два вопроса: 1) Почему при такой записи:

border-top-right-radius: 80px 50px;
border-bottom-left-radius: 80px 50px;
border-top-left-radius: 80px 50px;
border-bottom-right-radius: 80px 50px;

Всё работает как надо, а при такой:

border-radius: 80px 50px;

Выдаёт не тот результат? Как я понимаю эти две записи эквивалентны или я не прав?

2) Почему не отображается второй абзац? Должен получиться круг, но вообще ничего не отображается

2
  • 1
    «вообще ничего не отображается» — потому что depppink это некорректный цвет, правильно deeppink
    – andreymal
    12 янв 2019 в 19:24
  • @andreymal аааа да точно)
    – JustLearn
    13 янв 2019 в 8:05

1 ответ 1

1

Почему в этом коде у вас указано два значения? Ведь вы конкретно говорите какой угол и какой радиус.

border-top-right-radius: 80px 50px;
border-bottom-left-radius: 80px 50px;
border-top-left-radius: 80px 50px;
border-bottom-right-radius: 80px 50px;

Вторая запись работает верно, там можно указать сразу 4 значения, по аналогии с padding.

По второму абзацу, поменяйте цвет бордера. border: 5px solid deeppink

2
  • Все радиусы сразу так можно поставить
    – eri
    12 янв 2019 в 23:33
  • Как я понимаю первая запись(border-radius: 80px 50px) устанавливает border-radius для всех углов верно?
    – JustLearn
    13 янв 2019 в 8:07

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.