Multiple Borders können mittels CSS und pseudo-elementen dargestellt werden.

Dem 1. Element wird ein einzelner border zugewiesen.
Der 2. border wird als pseudo-element hinzugefügt.
Der 3. wird mittels einem outline-element dargestellt.
Der 4. wird mittels box-shadow realisiert.

Diesen Tip gibt es von:
http://css-tricks.com/snippets/css/multiple-borders/
Demo:
http://jsfiddle.net/chriscoyier/Vm9aM/



Der 2. Tip ist von:
http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-multiple-borders-with-simple-css/

Hier wird mittels den pseudo-elementen :before bzw. :after der border angefügt.

	
	Multi-Borders
	
		body { background: #d2d1d0; }
		
		#box {
			background: #f4f4f4;
			border: 1px solid #bbbbbb;
			width: 200px;
			height: 200px;
			margin: 60px auto;
			position: relative;
		}
		
		#box:before {
			border: 1px solid white;
			content: '';
			width: 198px;
			height: 198px;
			position: absolute;
		}
		
		#box:after {
			content: '';
			position: absolute;
			width: 196px;
			height: 196px;
			border: 1px solid #bbbbbb;
			left: 1px; top: 1px;
		}
	



	

Tags: HTML, border, multiple, CSS,

Kategorie: webdesign