HTML5 CSS3
|

Dodawanie obramowania (border) do elementów na stronie [CSS]

przezAurelia Sypniewska
Czas czytania: 1 minut

Obramowanie (tzw. ramka) stanowi istotny element strony internetowej nie tylko w przypadku tabel, może ono np. stanowić bardzo ciekawą dekoracją (np. wokół przycisku), lub rozdzielać witrynę na sektory.

Istnieje kilka typów obramowania jakie możemy uzyskać na stronie z pomocą CSS. Począwszy od zwykłej linii po kropkowaną lub kreskowaną. Oczywiście można te style także ze sobą mieszać uzyskując obiekt o różnych krawędziach.

W CSS własność obramowania opisuje się za pomocą zmiennej „border-style„.

Typy obramowania

Poniżej zajdziecie listę właściwości jakie może przyjmować właściwość border-style:

  • dotted – obramowanie kropkowane
  • dashed – obramowanie kreskowane
  • solid – obramowanie jednolite, w formie linii
  • double – obramowanie składające się z podwójnej linii
  • groove – definiuje rowkowane granicy 3D. Efekt zależy od wartości granicznej kolorów
  • ridge – definiuje prążkowane granicy 3D. Efekt zależy od wartości granicznej kolorów
  • inset – definiuje granicę 3D wstawka. Efekt zależy od wartości granicznej kolorów
  • outset – definiuje początku granicę 3D. Efekt zależy od wartości granicznej kolorów
  • none – brak obramowania
  • hidden – ukryte obramowanie

Oczywiście istotna jest również grubość obramowania „border-width„.
Przykłady:

See the Pen Border Style by Aura (@Julka85) on CodePen.

Czy można inaczej zapisać obramowanie?

Podobnie jak w przypadku właściwości CSS takich jak background sposób obramowania można zapisać na kilka rożnych sposobów. Chodzi tu o metodę zapisu uproszczoną np. zamiast:

p.dotted {border-style: dotted; 
border-width: 2px; 
border-color:#ccc;}

możemy skumulować to do

p.dotted {border: 2px dotted #ccc;}

Przeglądarka sama rozbije sobie ten zapis w efekcie efekt końcowy będzie identyczny.

Jak uzyskać obramowanie tylko dla jednej z krawędzi?

Warto pamiętać, że CSS w wielu przypadkach składa się z angielskich fraz i słów. Dlatego nikogo nie powinno dziwić nazewnictwo elementów:

  • border-top – góra krawędź
  • border-bottom – dolna krawędź
  • border-left – lewa krawędź
  • border-right – prawa krawędź

przykładowo kod będzie wyglądał więc tak:

p.dotted {border-left: 2px dotted #ccc;}

Oznacza to że lewa krawędź będzie kropkowana.

Warto przeczytać:

Źródło:
http://www.w3schools.com/css/css_border.asp