border-width: medium|thin|thick|length; - Grubość ramki
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ół

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

 

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

 

reveal-a

reveal-a

×

reveal-b

reveal-b

×

reveal-c

reveal-c

×