obramowanie

style="border: szerokość rodzaj kolor"
style="border-top: szerokość rodzaj kolor"
style="border-right: szerokość rodzaj kolor"
style="border-bottom: szerokość rodzaj kolor"
style="border-left: szerokość rodzaj kolor"

style="border: 15px solid orange;"	- pojedyncza linia ciągła
style="border: 15px dashed orange;"	- seria krótkich kresek
style="border: 15px dotted orange;"	- seria kwadratowych punktów
style="border: 15px double orange;"	- podwójna linia ciągła
style="border: 15px groove orange;"	- obramowanie wydaje się wklęsłe
style="border: 15px inset orange;"	- element zagłebiony w stronie
style="border: 15px outset orange;"	- element jest wypukły
style="border: 15px ridge orange;"	- obramowanie wydaje się wypukłe

<p style="border: 15px solid orange">
Wyspy Kanaryjskie – region Hiszpanii obejmujący archipelag górzystych wysp pochodzenia wulkanicznego położonych na Oceanie Atlantyckim
</p>


wynik kodu

Wyspy Kanaryjskie – region Hiszpanii obejmujący archipelag górzystych wysp pochodzenia wulkanicznego położonych na Oceanie Atlantyckim

<img src="grafika/sunflower02.jpg" style="width: 320px; height: 180px; border: 15px solid orange;" alt="sunflower" />

wynik kodu


<img src="grafika/sunflower02.jpg" style="width: 320px; height: 180px; border: 15px dashed orange;" alt="sunflower" />

wynik kodu


<img src="grafika/sunflower02.jpg" style="width: 320px; height: 180px; border: 15px dotted orange;" alt="sunflower" />

wynik kodu


<img src="grafika/sunflower02.jpg" style="width: 320px; height: 180px; border: 15px double orange;" alt="sunflower" />

wynik kodu


<img src="grafika/sunflower02.jpg" style="width: 320px; height: 180px; border: 15px groove orange;" alt="sunflower" />

wynik kodu


<img src="grafika/sunflower02.jpg" style="width: 320px; height: 180px; border: 15px inset orange;" alt="sunflower" />

wynik kodu


<img src="grafika/sunflower02.jpg" style="width: 320px; height: 180px; border: 15px outset orange;" alt="sunflower" />

wynik kodu


<img src="grafika/sunflower02.jpg" style="width: 320px; height: 180px; border: 15px ridge orange;" alt="sunflower" />

wynik kodu



ukrycie obramowania obrazu
style="border: hidden"




likwidacja obramowania obrazu
style="border: none"

kolor obramowania

style="border-color: wartość;"
style="border-top-color: wartość;"
style="border-right-color: wartość;"
style="border-bottom-color: wartość;"
style="border-left-color: wartość;"


style="border-style: solid; border-color: red;"
style="border-style: solid; border-top-color: red;"
style="border-style: solid; border-right-color: red;"
style="border-style: solid; border-bottom-color: red;"
style="border-style: solid; border-left-color: red;"


styl obramowania

style="border-style: wartość;"
style="border-top-style: wartość;"
style="border-right-style: wartość;"
style="border-bottom-style: wartość;"
style="border-left-style: wartość;"

style="border-style: solid;"	- pojedyncza linia ciągła
style="border-style: dashed;"	- seria krótkich kresek
style="border-style: dotted;"	- seria kwadratowych punktów
style="border-style: double;"	- podwójna linia ciągła
style="border-style: groove;"	- obramowanie wydaje się wklęsłe
style="border-style: inset;"	- element zagłebiony w stronie
style="border-style: outset;"	- element jest wypukły
style="border-style: ridge;"	- obramowanie wydaje się wypukłe

style="border-top-style: solid;"
style="border-right-style: solid;"
style="border-bottom-style: solid;"
style="border-left-style: solid;"


szerokość obramowania

style="border-width: wartość;"
style="border-top-width: wartość;"
style="border-right-width: wartość;"
style="border-bottom-width: wartość;"
style="border-left-width: wartość;"


style="border-style: solid; border-width: 20px;"
style="border-style: solid; border-top-width: 20px;"
style="border-style: solid; border-right-width: 20px;"
style="border-style: solid; border-bottom-width: 20px;"
style="border-style: solid; border-left-width: 20px;"


kształt narożników obramowania

zaokrąglone wierzchołki

style="border-radius: wartość"
wartość - 4 zaokrąglone wierzchołki
style="border-radius: wartość1 wartość2 wartość3 wartość4"

wartość1 - górny-prawy wierzchołek
wartość2 - dolny-prawy wierzchołek
wartość3 - dolny-lewy wierzchołek
wartość4 - górny-lewy wierzchołek

style="border-top-right-radius: wartość"
style="border-bottom-right-radius: wartość"
style="border-bottom-left-radius: wartość"
style="border-top-left-radius: wartość"


<p style="border: 5px solid green; padding: 20px; width: 300px; text-align: center; border-radius: 10px;">Wyspy Kanaryjskie</p>
<p style="border: 5px solid green; padding: 20px; width: 300px; text-align: center; border-radius: 20px;">Wyspy Kanaryjskie</p>
<p style="border: 5px solid green; padding: 20px; width: 300px; text-align: center; border-radius: 40px;">Wyspy Kanaryjskie</p>
<p style="border: 5px solid green; padding: 20px; width: 300px; text-align: center; border-radius: 10px 0px 10px 0px;">Wyspy Kanaryjskie</p>
<p style="border: 5px solid green; padding: 20px; width: 300px; text-align: center; border-radius: 20px 0px 20px 0px;">Wyspy Kanaryjskie</p>
<p style="border: 5px solid green; padding: 20px; width: 300px; text-align: center; border-radius: 40px 0px 40px 0px;">Wyspy Kanaryjskie</p>
<p style="border: 5px solid green; padding: 20px; width: 300px; text-align: center; border-radius: 80px 0px 80px 0px;">Wyspy Kanaryjskie</p>

wynik kodu

Wyspy Kanaryjskie

Wyspy Kanaryjskie

Wyspy Kanaryjskie

Wyspy Kanaryjskie

Wyspy Kanaryjskie

Wyspy Kanaryjskie

Wyspy Kanaryjskie

kształty eliptyczne

style="border-radius: wartość-szerokości wartość-wysokości"
wartość - 4 zaokrąglone wierzchołki
style="border-top-right-radius: wartość-szerokości wartość-wysokości"
style="border-bottom-right-radius: wartość-szerokości wartość-wysokości"
style="border-bottom-left-radius: wartość-szerokości wartość-wysokości"
style="border-top-left-radius: wartość-szerokości wartość-wysokości"


<p style="border: 5px solid green; padding: 20px; width: 300px; text-align: center; border-radius: 100px 10px;">Wyspy Kanaryjskie</p>
<p style="border: 5px solid green; padding: 20px; width: 300px; text-align: center; border-radius: 100px 20px;">Wyspy Kanaryjskie</p>
<p style="border: 5px solid green; padding: 20px; width: 300px; text-align: center; border-radius: 100px 40px;">Wyspy Kanaryjskie</p>
<p style="border: 5px solid green; padding: 20px; width: 300px; text-align: center; border-radius: 100px 10px; background-color: yellow;">Wyspy Kanaryjskie</p>
<p style="border: 5px solid green; padding: 20px; width: 300px; text-align: center; border-radius: 100px 20px; background-color: orange;">Wyspy Kanaryjskie</p>
<p style="border: 5px solid green; padding: 20px; width: 300px; text-align: center; border-radius: 100px 40px; background-color: red;;">Wyspy Kanaryjskie</p>

wynik kodu

Wyspy Kanaryjskie

Wyspy Kanaryjskie

Wyspy Kanaryjskie

Wyspy Kanaryjskie

Wyspy Kanaryjskie

Wyspy Kanaryjskie

obraz

border-image

<img src="grafika/sunflower02.jpg" alt="sunflower" style="border: 25px solid transparent; border-image: url('grafika/buzia.png');" />
<img src="grafika/sunflower02.jpg" alt="sunflower" style="border: 25px solid transparent; border-image: url('grafika/buzia.png') 50 50 round;" />
<img src="grafika/sunflower02.jpg" alt="sunflower" style="border: 25px solid transparent; border-image: url('grafika/buzia.png') 50 100 round;" />
<img src="grafika/sunflower02.jpg" alt="sunflower" style="border: 25px solid transparent; border-image: url('grafika/buzia.png') 100 50 round;" />
<img src="grafika/sunflower02.jpg" alt="sunflower" style="border: 25px solid transparent; border-image: url('grafika/buzia.png') 100 100 round;" />

wynik kodu


<div style="width: 300px; height: 150px; border: 25px solid transparent; border-image: url('grafika/buzia.png') 50 50 round;"></div>
<div style="width: 300px; height: 150px; border: 25px solid transparent; border-image: url('grafika/buzia.png') 100 50 round;"></div>

wynik kodu

border-image-outset

<img src="grafika/sunflower02.jpg" alt="sunflower" style="border: 25px solid transparent; border-image: url('grafika/buzia.png');" />
<img src="grafika/sunflower02.jpg" alt="sunflower" style="border: 25px solid transparent; border-image: url('grafika/buzia.png'); border-image-outset: 30px;" />

wynik kodu

border-image-repeat

<img src="grafika/sunflower02.jpg" alt="sunflower" style="border: 25px solid transparent; border-image: url('grafika/buzia.png');" />
<img src="grafika/sunflower02.jpg" alt="sunflower" style="border: 25px solid transparent; border-image: url('grafika/buzia.png'); border-image-repeat: repeat;" />
<img src="grafika/sunflower02.jpg" alt="sunflower" style="border: 25px solid transparent; border-image: url('grafika/buzia.png'); border-image-repeat: round;" />
<img src="grafika/sunflower02.jpg" alt="sunflower" style="border: 25px solid transparent; border-image: url('grafika/buzia.png'); border-image-repeat: space;" />
<img src="grafika/sunflower02.jpg" alt="sunflower" style="border: 25px solid transparent; border-image: url('grafika/buzia.png'); border-image-repeat: stretch;" />

wynik kodu

border-image-slice

<img src="grafika/sunflower02.jpg" alt="sunflower" style="border: 25px solid transparent; border-image: url('grafika/buzia.png');" />
<img src="grafika/sunflower02.jpg" alt="sunflower" style="border: 25px solid transparent; border-image: url('grafika/buzia.png'); border-image-slice: 20" />
<img src="grafika/sunflower02.jpg" alt="sunflower" style="border: 25px solid transparent; border-image: url('grafika/buzia.png'); border-image-slice: 20%" />
<img src="grafika/sunflower02.jpg" alt="sunflower" style="border: 25px solid transparent; border-image: url('grafika/buzia.png'); border-image-slice: fill" />

wynik kodu

border-image-source

<img src="grafika/sunflower02.jpg" alt="sunflower" style="border: 25px solid transparent; border-image-source: url('grafika/buzia.png');" />

wynik kodu

border-image-width

<img src="grafika/sunflower02.jpg" alt="sunflower" style="border: 25px solid transparent; border-image: url('grafika/buzia.png');" />
<img src="grafika/sunflower02.jpg" alt="sunflower" style="border: 25px solid transparent; border-image: url('grafika/buzia.png'); border-image-width: 30px" />
<img src="grafika/sunflower02.jpg" alt="sunflower" style="border: 25px solid transparent; border-image: url('grafika/buzia.png'); border-image-width: 30%" />
<img src="grafika/sunflower02.jpg" alt="sunflower" style="border: 25px solid transparent; border-image: url('grafika/buzia.png'); border-image-width: 30" />
<img src="grafika/sunflower02.jpg" alt="sunflower" style="border: 25px solid transparent; border-image: url('grafika/buzia.png'); border-image-width: auto" />

wynik kodu