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 that you have read and understand our privacy policy and code of conduct.

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