border-radius почему не работает?

126
06 августа 2019, 12:20

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) Почему не отображается второй абзац? Должен получиться круг, но вообще ничего не отображается

Answer 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

READ ALSO
&lt;picture&gt; на IOS 12

<picture> на IOS 12

Использую разметку с picture-тэгом для главного слайда:

132
как загрузить value в input_е своим значением

как загрузить value в input_е своим значением

заблудился в 2-х соснах: почему value в input не грузится? Внутри функции value обновляется, а при выходе из функции в поле value пустоНе пойму в чем ошибка

109
Выравнивание элементов с разным line-height

Выравнивание элементов с разным line-height

Взялся сверстать макет для практикиОпыт в верстке небольшой

113