Do tworzenia obramowań w języku CSS, służą właściwości, które rozpoczynają się od słowa border. Poniższe przykłady, pozwolą Ci poznać, jak tworzyć obramowanie w CSS.
Styl obramowania CSS
W języku CSS obramowanie może posiadać różne style. Aby ustawić styl obramowania, należy ustawić atrybut border-style.
solid- ciągła liniadashed- przerywana liniadotted- kropkowana liniadouble- podwójna liniagroove- efekt 3D, jego efekty zależą od właściwościborder-colorridge- efekt 3D, jego efekty zależą od właściwościborder-colorinset- efekt 3D, jego efekty zależą od właściwościborder-coloroutset- efekt 3D, jego efekty zależą od właściwościborder-colornone- brak obramowaniahidden- obramowanie jest ukryte
Grubość obramowania CSS
Grubość obramowania w CSS jest ustawiana za pomocą border-width. Wartość ta może być podawana w różnych jednostkach, jednak na początku będziemy używać pikseli.
border-width może mieć jedną lub cztery wartości. Jeżeli będzie miało cztery wartości to grubość krawędzi będzie odpowiadać kolejno narożnikowi górnemu, prawemu, dolnemu i lewemu.
Kolor obramowania CSS
Za kolor obramowania odpowiada właściwość border-color. Kolor może przyjmować nazwę koloru, wartość RGB lub HEX. Jako wartość można również podać transparent wtedy obramowanie będzie przezroczyste.
Jak prościej ustawiać tło? Właściwością border
Poprzednie przykłady pokazują, że trzeba ustawiać wiele właściwości, aby ustawić obramowanie. Właściwość border, pozwala na szybkie ustawienie wszystkich powyższych wartość. Łączy ona ze sobą:
border-widthborder-style- wartość ta jest wymaganaborder-color
Zaokrąglanie rogów - właściwość border radius
border-radius służy do zaokrąglania rogów obramowania.