Div mit CSS designen

[Laminator-Berli]

Hey Leute,

ich bin fast am verzweifeln.
Ich möchte ein Div mit der weite von 1000 px und automatischer höhe erstellen.
Soweit kein Problem!
Nur möchte ich jetzt das dort herum ein zackiger Rand ist. (siehe Bild)

Habe es jetzt mal so versucht.

html, body {
  margin: 0px;
  background-position:-192px 0%;
}

div {
    border: 15px solid transparent;
    width: 1000px;
    padding: 10px 20px;
}

#content {
  position: absolute;
  background-image: URL('../pics/contentbg.gif');
  background-size: 100% 100%;
  background-position: -8px -8px;
  background-repeat: no-repeat;
  margin-left: -120px;
  height: auto;
  width: 1000px;
  left: 50%;
  margin-left: -500px;
  top: 230px;
  -webkit-border-image: url(../pics/border.png) 30 30 round; /* Safari 3.1-5 */
  -o-border-image: url(../pics/border.png) 30 30 round; /* Opera 11-12.1 */
  border-image: url(../pics/border.png) 30 30 round;
} 

aber das funktioniert auch nicht so wie gewünscht. (siehe Bild2)

[nameless97]

1. ist das kein PHP
und
2. liegt das daran, dass du das von w3schools kopiert hast

[Laminator-Berli]

1. deswegen steht im Titel das Wort CSS drin.. aber ja habe keine passende Kategorie gefunden.

2. nein das habe ich nicht von dort kopiert

[nameless97]

Die Definition vom <div> ist schonmal merkwürdig.
Dann stimmen die width von div und content mitsamt margins und paddings nicht wirklich überein, und dass mit monströsen Minuswerten im margin (es gibt margin-left zwei mal?) zu reparieren ist irgendwie auch keine Lösung.

[Kinger]

2. nein das habe ich nicht von dort kopiert

Das hätte mich auch gewundert.

So kann man das machen: jsfiddle.net

[nameless97]

2. nein das habe ich nicht von dort kopiert

Sah dann wohl nur so aus.

Der w3schools Code:

-webkit-border-image:url(border.png) 30 30 round; /* Safari 3.1-5 */
-o-border-image:url(border.png) 30 30 round; /* Opera 11-12.1 */
border-image:url(border.png) 30 30 round;

Die Comments haben mich stutzig gemacht

[Kinger]

Das ist vielleicht sogar kopiert oder von einem Generator. Aber der Rest würde mich wunder, wenn das jemand veröffentlicht.

[nameless97]

Ich meinte auch nur die border-image Zeilen. Das sieht so aus als wären die zusätzlich so dareinkopiert worden, in der Hoffnung das Ergebnis würde passen.