Przejdź do treści

Atrybuty mieszane obramowania {border}

Jak ustawić szerokość (grubość), styl i kolor obramowania dowolnego elementu?

Atrybuty mieszane obramowania {border}

  1. Atrybuty mieszane górnego obramowania:
    selektor { border-top: wartości atrybutów }
  2. Atrybuty mieszane dolnego obramowania:
    selektor { border-bottom: wartości atrybutów }
  3. Atrybuty mieszane lewego obramowania:
    selektor { border-left: wartości atrybutów }
  4. Atrybuty mieszane prawego obramowania:
    selektor { border-right: wartości atrybutów }
  5. Atrybuty mieszane całego obramowania:
    selektor { border: wartości atrybutów }
Jako "wartości atrybutów" należy wpisać kolejne wartości szerokości, stylu (obowiązkowo!) i koloru obramowania (rozddzielone spacjami).

[Zobacz także: Wstawianie stylów]

Polecenie pozwala podać w jednej komendzie kilka atrybutów obramowania jednocześnie, które mogą dotyczyć różnych własności. Dzięki temu możemy uniknąć pisania długich deklaracji, np. zamiast wpisywać:

border-width: medium; border-style: solid; border-color: blue
wystarczy podać:
border: medium solid blue
a otrzymamy ten sam efekt.
Przy tworzeniu obramowania możesz również skorzystać ze specjalnego generatora zamieszczonego tutaj.

Przykład {border}

border-top: thick double green

border: medium solid blue

Podkreślenie tekstu

Ciekawym zastosowaniem dolnego obramowania może być uzyskanie efektu podkreślenia o różnym stylu, kolorze i grubości:

<span style="border-bottom: 3px solid red">...</U>

<span style="border-bottom: 3px double red">...</span>

<span style="border-bottom: 1px dashed red">...</span>


Aby skrócić zapis i ułatwić późniejsze modyfikacje, można posłużyć się klasą selektorową, tzn. w arkuszu stylów wpisujemy np.:

*.podkreslenie { border-bottom: 2px #f80 solid }
a następnie na stronie:
<span class="podkreslenie">...</span>

Zagnieżdżanie obramowania

<div style="border: solid red 3px">
	<div style="border: solid green 3px">
		<div style="border: solid blue 3px">
			Potrójnie zagnieżdżone obramowanie
		</div>
	</div>
</div>
Potrójnie zagnieżdżone obramowanie

Pytania i odpowiedzi {border}

Jak ustawić "border" w CSS?

Aby ustawić border w CSS, należy określić trzy główne właściwości: grubość (np. 2px), styl (np. solid) i kolor (np. black) obramowania. Przykład: "border: 2px solid black" ustawia czarne obramowanie o grubości 2 piksele ze stylem solid.

Jak zmienić kolor obramowania w CSS?

Aby zmienić kolor obramowania w CSS, zmodyfikuj wartość koloru w właściwości border-color. Możesz użyć nazwy koloru (np. red), wartości heksadecymalnej (np. #00ff00) lub funkcji koloru (np. rgb(255, 0, 0)). Przykład: "border: 2px solid red" ustawia czerwone obramowanie o grubości 2 piksele ze stylem solid.

Jak zrobić ramkę w CSS?

Aby stworzyć ramkę wokół elementu w CSS, można użyć właściwości border i określić grubość, styl i kolor obramowania. Na przykład: <div style="border: 2px solid black">...</div> tworzy czarną ramkę o grubości 2 pikseli wokół elementu. Zobacz również: Ramki z tekstem.

Jak zrobić ramkę wokół zdjęcia CSS?

Aby stworzyć ramkę wokół zdjęcia (<img>) w CSS, można użyć właściwości border i określić grubość, styl i kolor obramowania. Na przykład: <img src="obraz.jpg" style="border: 2px solid black" alt="Zdjęcie"> tworzy czarną ramkę o grubości 2 pikseli wokół obrazka.

Przeglądarki


Chrome
Firefox
Edge
Opera
Safari
border: wartość1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23
border-top: wartość1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23
border-right: wartość1
2008-12-11		1
2004-11-09		12
2015-07-29		9.2
2007-04-11		1
2003-06-23
border-bottom: wartość1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23
border-left: wartość1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23

Komentarze

Zobacz więcej komentarzy

Facebook