Dodawanie obramowania na stronie internetowej [CSS]

Obramowanie, border (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, popularne rodzaje 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„. To ona decyduje o grubości dodawanej ramki.

Jak zrobić obramowanie na stronie HTML?

W praktyce może to wyglądać następująco:

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

Jak widać chociaż elemety są stworzone w HTML same cechy dodajemy w CSS.

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ć:

• Zaokrąglanie narożników
• Outline
• Tworzenie tabel HTML

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