CSS'те чек аралары менен иштөөнүн негиздери

Азыр биз элементтерге чек ара кошун үйрөнөбүз. Бул үч касиет аркылуу жасалат: border-width касиети чек аранын калыңдыгын, border-color - түсүн, ал эми border-style чек аранын түрүн белгилейт.

Биринчи эки касиет түшүнүктүү жол менен иштейт: border-color color касиети сыяктуу форматта түстөрдү кабыл алат, чек аранын калыңдыгы пикселдер менен белгиленет. Ал эми border-style касиети ачкыч сөздөр түрүндөгү маанилерди кабыл алат. Мисалы, solid мааниси үзгүлтүксүз сызыкты белгилейт.

Келгиле, мисалы, 3 пиксел калыңдыктагы, үзгүлтүксүз сызык түрүндөгү, кызыл түстөгү чек араны жасайлы:

html<div id="elem"></div>

css#elem {
  border-width: 3px;    /* калыңдыгы 3px */
  border-style: solid;  /* сызык түрүндө */
  border-color: red;    /* кызыл түс */
  width: 300px;
  height: 100px;
}

Результат:

Кийинки сабактарда биз чек аралар менен иштөөнү деталдуу карап чыгабыз.