Du bist nicht angemeldet.

  • Anmelden
  • Registrieren

Div Container mit abgerundeten Ecken erstellen [Tutorial CSS 3]

D_Blade

Quicksilver Style

Beiträge: 145

1

15.01.2009, 18:25

Div Container mit abgerundeten Ecken erstellen [Tutorial CSS 3]

Sicherlich kennt ihr die Div Container.
Habt ihr euch schon einmal gefragt, ob man sie auch mit abgerundeten Ecken erstellen kann?
Ja, es geht und zwar mit CSS 3.
Firefox 2 konnte das zwar auch schon "verstehen", hatte aber noch einige Fehler.
Doch mit Firefox 3 ist das Problem behoben.
Browser wie Mozilla Firefox, Safari und Konqueror sollten alles richtig darstellen.
Doch auch für Internet Explorer Nutzer ist es nicht weiter schlimm, denn die Div Container werden dann einfach normal dargestellt, d.h. mit eckigen Ecken :D
Für Mozilla verwendet man einfach:

PHP-Quelltext

 
1
2
3
4
5

* -moz-border-radius
* -moz-border-radius-topleft
* -moz-border-radius-topright
* -moz-border-radius-bottomleft
* -moz-border-radius-bottomright

Für Konquerer und Safari folgenden Code:

PHP-Quelltext

 
1
2
3
4
5

* -khtml-border-radius
* -khtml-border-radius-topleft
* -khtml-border-radius-topright
* -khtml-border-radius-bottomleft
* -khtml-border-radius-bottomright

Die Angaben kann man entweder prozentual oder über eine Längenangabe festlegen.
-moz-border-radius und -khtml-border-radius machen gleich alle 4 Ecken rund.
Hier mal ein Beispiel, wie sowas aussehen könnte:

PHP-Quelltext

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<style type="text/css">
div
{
font-size:12px;font-family:Verdana;
position:absolute;width:100px;height:200px;
background-color:#efefef;
}
.div1
{
border:3px solid #ff0000;
left:10px;top:50px;
-moz-border-radius:30px;
-khtml-border-radius:30px;
}
.div2
{
border:1px solid #aaaaaa;
left:200px;top:50px;
-moz-border-radius:10px;
-khtml-border-radius:30px;
}
</style>
<title>Rahmen mit abgerundeten Ecken</title>
</head>
<body>
<div class="div1">Beispiel 1</div>
<div class="div2">Beispiel 1</div>
TOD! - Nr. 1 Killer in Deutschland

Ähnliche Themen

Thema bewerten