SELF-Treffen in Mannheim vom 23.05. bis 25.05.2025

SELFHTML wird 30 Jahre alt! Das wollen wir gebührend feiern!
Weitere Informationen und eine Anmeldemöglichkeit gibt es in der Veranstaltungs-Ankündigung.

Beispiel:CSS border-image-1.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!DOCTYPE html>
<html lang="de">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Schmuckrahmen mit border-image</title>
	<style>
img {
  border: 5em solid;
}	

.schmuckrahmen {
  border-image-slice: 60 60 60 60;
  border-image-width: 5em;
  border-image-outset: 0px 0px 0px 0px;
  border-image-repeat: stretch repeat;
  border-image-source: url("https://upload.wikimedia.org/wikipedia/commons/0/04/Frame.svg"); 
}

figure {
  margin: 1em auto;
  width: 100%;
  max-width: 38em;
}

figcaption {
  text-align: center;
}
</style>
</head>
<body><h1>Schmuckrahmen mit <code>border-image</code></h1>

	<figure>
		<img class="schmuckrahmen" src="https://wiki.selfhtml.org/images/a/a6/Lauf-1.jpg" alt="Lauf an der Pegnitz - Nürnberger Tor">
		<figcaption> Nürnberger Tor in Lauf an der Pegnitz</figcaption>
    </figure>    

</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS_border-image-1.html&oldid=99837“