Jak zrobić obramowanie elementu HTML?

redakcja | 20.07.2021 09:38

Obramowanie w HTML najłatwiej i najlepiej na początek wytłumaczyć na bazie elementu blokowego, jakim jest <div>. Wiedzieć musisz, że każdy div ma obramowanie, nawet jeśli jest niewidoczne, albo jeśli jest ustawione na wartość 0. Obramowanie to oddziela jeden <div> od drugiego. Obramowaniem manipulujemy za pomocą CSS i właściwości border oraz pochodnych jak border-width, border-color czy border-top

Programista wpatrujący się w kod, ilustracja do artykułu
Programista wpatrujący się w kod, ilustracja do artykułu | envato, autor vadymvdrobot

Podstawowa składania właściwości obramowania w CSS ma prostą postać, ale przyjmuje wiele wartości. 

div {border: border-width border-style border-color;}
Ustawiając właściwość jak poniżej, każdy div dostanie obramowanie o szerokości 2px, kolorze czerwonym oraz linia będzie ciągła. 

div {border: 2px solid red;}

Szerokość border-width podajemy za pomocą umownych wartości jak thin, medium, thick lub wartości liczbowych, lub procentowych. Używając wartości liczbowych i procentowych mamy większą kontrolę. Gdy podasz wartość w pikselach, grubość obramowania ma dokładnie taką wartość. Gdy podasz szerokość obramowania w procentach, grubość obramowania ma wartość procentową w stosunku do całego bloku.

Style linii obramowania, czyli  border-style,  mogą przyjąć jedną z poniższych wartości:

  • none - czyli brak obramowania, przeglądarka w tym przypadku ustawia szerokość na 0. Jest to domyślna wartość.
  • dashed -  czyli serie kresek.
  • dotted - obramowanie stworzone jest z linii kropkowanej.
  • double - obramowanie ma postać dwóch ciągłych linii.
  • groove  - obramowanie przyjmuje  efekt wyrzeźbienia.
  • inset  - obramowanie z efektem zapadnięcia bloku.
  • outset  -  obramowanie, które jest odwrotnością 'inset'. Blok wydaje się wysunięty z powierzchni. 
  • ridge -  przeciwieństwo obramowania 'groove'.
  • solid - w mojej ocenie najpopularniejsze obramowanie, które będziesz używał w CSS. Jest to  pojedyncza, prosta i ciągła linia.

Wartość border-color przyjmuje wartości kolory jak każdy inny element HTML.

Każdy element w HTML ma cztery linie obramowania.

Artykuły z portalu