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;
}

Результат:

შემდეგ გაკვეთილებში ჩვენ უფრო დეტალურად განვიხილავთ საზღვრებთან მუშაობას.