border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset; - Styl ramki
border-color: color|transparent; - Kolor ramki
border-{top|bottom|left|right}: border-width border-style border-color; - Skrócona definicja jednego boku ramki
border-{top|bottom|left|right}-width: medium|thin|thick|length; - Grubość jednego boku ramki
border-{top|bottom|left|right}-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset; - Styl jednego boku ramki
border-{top|bottom|left|right}-color: color|transparent; - Kolor jednego boku ramki
border: border-width border-style border-color; - Skrócona definicja ramki
border-{top|bottom}-{left-right}-radius: wartość - zaokrąglenie jednego z rogów ramki
border-radius: kilka wartości; - zaokrąglenie rogów ramki
Grubość ramki
-
border-width: thin; - cienka ramka
-
border-width: medium; - średnia ramka
-
border-width: thick; - gruba ramka
-
border-width: x; - ramka o grubości x
-
border-width: a b; - góra i dół ramki grubość a, boki grubość b
-
border-width: a b c; - góra grubość a, boki grubość b, dół grubość c
-
border-width: a b c d; - kolejność: góra, prawo, dół, lewo
Styl ramki
-
border-style: none; - brak ramki
-
border-style: hidden; - ramka ukryta
-
border-style: dotted; - obramowanie wykropkowane
-
border-style: dashed; - obramowanie wykreskowane
-
border-style: solid; - obramowanie linią ciągłą
-
border-style: double; - ramka podwójna
-
border-style: groove; - ramka zagłębiona
-
border-style: ridge; - ramka uwypuklona
-
border-style: inset; - przycisk wciśnięty
-
border-style: outset; - przycisk wyciśnięty
-
border-style: a b c d; - style ramki można definiować jak grubości ramki. Każdą osobno, parami lub góra, boki i dół
Kolor ramki
-
border-color: red; - kolor ramki z tabeli kolorów
-
border-color: transparent; - ramka przezroczysta
-
border-color: a b c d; - kolor ramki można definiować jak grubości ramki. Każdy osobno, parami lub góra, boki i dół
Zaokrąglenie ramki
-
border-radius: a; - zaokrąglenie o promieniu x
-
border-radius: a b; - lewy górny i prawy dolny zaokrąglenie x, prawy górny i lewy dolny zaokrąglenie y
-
border-radius: a b c; - lewy górny x, prawy górny i lewy dolny y, prawy dolny z
-
border-radius: a b c d; - kolejność: lewy górny, prawy górny, prawy dolny, lewy dolny
-
border-radius: a b c d / e f g h – pierwsze liczby określają zaokrąglenie w poziomie a drugie w pionie
Przykład
border-radius: 50px 100px 150px 200px / 40px;
w poziomie każdy róg ma inny promień: 50,100,150 i 200 a w pionie każdy ma 40