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 }

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

border: medium solid blue

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 }

<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>