Abgerundete Ecken per CSS

JensenJR · 16.02.2009

Hi,

ich habe eine kleine Datei erstellt und wollte abgerundete Ecken per CSS erzeugen. Aber es funzt nicht. Wo liegt mein Denkfehler?

Zum besseren Verständnis füge ich den Code an:

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css />
</head>
<body>
<div id="page-wrap">
<h1>Runde Ecken</h1>
<p>Tutorial</p>
<div class="box-one">
<img src="images/box-one-top.png" />
<div class="inside">
<p>Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<img src="images/box-one-bottom.png" />
</div>
</div>
</body>
</html>

Die CSS-Datei sieht so aus:

* {margin:0px; padding:0px;}
#page-wrap {width:500px; height: 400px; margin:25px auto;}
.box-one {width: 350px; background: url(images/box-one-middle.png) center repeat-y; margin: 10px; 0px;}
.box-one.inside {padding: 0px; 20px; font-size:14px; font-family:Georgia,serif; line-height:16px;}

Im Ordner images befinden sich die PS-Dateien box-one-top.png, box-one-bottom.png sowie box-one-middle.png

Danke für die Hilfe.

tiroler · 17.02.2009

AW: Abgerundete Ecken per CSS

hier stehts:

Rahmen mit abgerundeten Ecken: Tipps und Tricks auf CSS 4 You - The Finest in Stylesheets

Elminster · 17.02.2009

AW: Abgerundete Ecken per CSS

Morgen

Wird aber nicht von IE unterstützt. Allg. ist die Nummer mit den Abgerundeten Ecken per CSS ne heikle sache, musst da mit paar hacks arbeiten um es ordentlich darzustellen.

Vielleicht wäre nen PS basiertes Layout mit Runden Ecken ne Alternative? Nur so als Vorschlag?

Gruß

Emporia · 17.02.2009

AW: Abgerundete Ecken per CSS

Grafik oben, Grafik unten und in der Mitte Hintergrundfarbe

lg

serverhombre · 17.02.2009

AW: Abgerundete Ecken per CSS

Hallo,
hier auch nich ein kleiner Link:

die Box passt sich auch in der Größe an, mir persönlich leider zu viele div's :rolleyes:

Aber vielecht hilft es ja weiter.....

JensenJR · 18.02.2009

AW: Abgerundete Ecken per CSS

Hallo,

herzlichen Dank für die Antworten. Ich habe mir mal die Beispiele angeschaut und musste feststellen, dass es immer wieder Probleme mit den Browsern gibt. Na ja, vielleicht werden runde Ecken zum Standard.

Liebe Grüße.

Emporia · 18.02.2009

AW: Abgerundete Ecken per CSS

Also die Variante, dass der obere Teil des "Elements" ein gif ist (mit den beiden oberen "Ecken" bzw. "Rundungen") und der untere Teil ein gif ist (logischerweise mit den beiden unteren Rundungen) und der mittlere, in der Höhe flexible Teil einfach Hintergrundfarbe ist (natürlich dieselbe wie die beiden gif´s! und natürlich dieselbe Breite - nicht zu vergessen), dann hast du mit keinem Browser Probleme.

Alles Gute dabei.

deba · 22.02.2009

AW: Abgerundete Ecken per CSS

Hallo,

ich persönlich hatte das gleiche Problem und nach langen suchen und probieren mit HTML und CSS bin auf eine Lösung gestoßen, die mit CSS und JS arbeitet. Zu finden unter

Ab Nifty Corners with CSS and Javascript sollte es interessant werden.

bookworm1000 · 25.02.2009

AW: Abgerundete Ecken per CSS

Ich habe meine abgerundeten Ecken mit folgendem Tutorial gemacht:

Ist zwar auch mit Grafiken, aber nur mit ganz kleinen und läuft auch problemlos mit IE. Außerdem kann man ganz nette effekte (ganz nach unten scrollen) unterbringen.