Асосҳои кор бо ҳудуд дар 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;
}

Результат:

Дар дарсҳои оянда мо кор бо ҳудудро ба тафсилтар баррасӣ хоҳем кард.