Почему не работает border-width?

#html #css #вёрстка #border

Абзацы отображаются без границы:



p.one {
  border-width: 2px;
}

p.two {
  border-width: thick;
}

p.three {
  border-width: 1px 4px 12px 3px;
}

  Синтезатор


  Синтезатор


  Синтезатор




    

Ответы

Ответ 1

Почему не работает border-width?


Потому что нужно задавать тип обводки - border-style: solid; Подробнее на htmlbook.ru

Тогда заработает и толщина обводки - border-width: 2px;

Цвет по-умолчанию черный, если нужен другой, то можно задать - border-color: #color;

Или все вместе записывается: border: 2px solid red;



div {
  width: 200px;
  height: 100px;
  
  border-width: 2px;
  border-style: solid;
  border-color: red;
}



Ответ 2

Универсальное свойство border позволяет одновременно установить толщину, стиль и
цвет границы вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом,
браузер сам определит, какое из них соответствует нужному свойству. 

Синтаксис:  

border: border-width || border-style || border-color;


Как написал @meine в комментариях, ширина для border задана, а сам border не обозначен. 

Все работает:  



p.one {
    border: solid black;
    border-width: 2px;
}
p.two {
    border: solid black;
    border-width: thick;
}
p.three {
    border: solid black;
    border-width: 1px 4px 12px 3px;
}

   Синтезатор
  

   Синтезатор


   Синтезатор