Stylizowanie obramowania: właściwość border

Do ustawienia obramowania używamy właściwości border (ang. border = obwódka na krawędzi, obszar graniczny elementu). Możemy zastosować trzy podstawowe subatrybuty: border-width (szerokość obramowania w pikselach), border-style (rodzaj linii stanowiącej obwódkę - patrz ilustracja poniżej) oraz border-color (kolor obwódki). Przykładowe style:

  border-style: solid;
border-style: dotted;
border-style: dashed;
border-style: double;
border-style: ridge;
border-style: groove;
border-style: inset;
border-style: outset;
border-style: solid;
border-style: dotted;
border-style: dashed;
border-style: double;
border-style: ridge;
border-style: groove;
border-style: inset;
border-style: outset;

Natomiast w praktyce, często nie piszemy następujących po sobie trzech kolejnych właściwości, tylko stosujemy zapis skrótowy, pisząc jedynie słowo border, a po dwukropku trzy wartości rozdzielone spacją i zakończone oczywiście średnikiem. Najpierw podajemy szerokość w pikselach, potem rodzaj linii i na końcu jej kolor.

  border: 2px solid green; 

Można także użyć subatrybutów: left, right, top, bottom. Ponadto istnieje właściwość border-image, pozwalająca użyć obrazu jako obramowania (więcej na ten temat znajdziesz tutaj). Zobaczmy zatem jeszcze kilka przykładów użycia obramowania:

  border-left: 1px solid black;
border-right: 1px dashed blue;
border-top: 1px groove green;
border-bottom: 1px dotted yellow;
border-image: url("obraz.png") 30 round;

Zobacz także

Daj się zaskoczyć! Poniżej wylosowałem dla Ciebie pięć wpisów z innych kategorii blogowych aniżeli ta, którą właśnie przeglądasz:

Polecamy: Sekurak Academy 2024

Sekurak Academy 2024

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp do materiałów z edycji Sekurak Academy z roku 2023! Przy zakupie możecie skorzystać z kodu: pasja-akademia w koszyku, uzyskując rabat -30% na bilety w wersji "Standard" - warto korzystać! Więcej szczegółów znajdziecie tutaj.

Książka: Wprowadzenie do bezpieczeństwa IT

Wprowadzenie do bezpieczeństwa IT

Niedawno wystartował dodruk świetnej, rozchwytywanej książki pt. "Wprowadzenie do bezpieczeństwa IT, Tom I" (około 940 stron). Mamy dla Was kod: pasja (wpisz go w koszyku), dzięki któremu otrzymacie 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla naszych Widzów! Jest to pierwszy tom serii o ITsec, który wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

Pomóż dzieciom

Polska Akcja Humanitarna od wielu lat dożywia dzieci. Proszę, poświęć teraz dosłownie chwilę i pomóż klikając w oznaczony strzałką zielony brzuszek Pajacyka. Dziękuję!

Komentarze

Disqus

Kategorie wpisów

Oto polecana książka warta Waszej uwagi.
Pełna lista polecanych książek jest tutaj.

Uwaga - w dniach od 06.02.2024 do 15.02.2024 trwa w Helion.pl walentynkowa akcja promocyjna "Pokochaj kodowanie!" - otrzymujemy drugą książkę gratis albo -35% na jedną książkę drukowaną oraz -40% na ebooka. Zobacz promocję walentynkową tutaj.

Bądź na bieżąco
Pasja informatyki