HTML, CSS, PHP, MySQL

html-php.de

HTML & CSS Stylesheets Referenz JavaScript PHP MySQL Sonstiges Gästebuch Inhalt Impressum

[ Rahmen definieren ] [ Rahmen-Style ] [ Rahmen-Breite ] [ Rahmen-Farbe ] [ Mehrere Werte im Attribut ] [ Abgerundete Ecken ]

Rahmen definieren

Rahmen können für Grafiken und Tabellen, aber auch für Textabschnitte definiert werden, wie bei den Befehlen h1-h6, p, blockquote, pre, div.

style="border:solid thin red;"

Dieses Attribut zeichnet einen dünnen durchgezogenen Rahmen in der Farbe rot. Stattdessen kann aber folgendes geschrieben werden.

style="border-style:solid; border-width:thin; border-color:red;"

Rahmen-Style definieren

Folgende Angaben zum Style sind möglich:

noneKein Rahmen       
hiddenunsichtbarer Rahmen    
dottedgepunktet    
dashedgestrichelt    
soliddurchgezogen    
doubledoppelt    
groove3D    
ridge3D    
inset3D    
outset3D    

Das border-style-Attribut kann nochmals aufgeteilt werden:

  style="border-top-style:solid; border-left-style:none;
  border-right-style:double; border-bottom-style:solid"

Dabei bedeutet:

border-top-styledefiniert den Rahmentyp für oben
border-left-styledefiniert den Rahmentyp für links
border-right-styledefiniert den Rahmentyp für rechts
border-bottom-styledefiniert den Rahmentyp für unten

Rahmenbreite definieren

Folgende Angaben zum width sind möglich:

1pxRahmenbreite in Pixel  
thindünner Rahmen  
mediummittlerer Rahmen  
thickdicker Rahmen  

Das border-width-Attribut kann nochmals aufgeteilt werden:

  style="border-top-width:2px; border-left-width:thin;
  border-right-width:medium; border-bottom-width:thick"

Dabei bedeutet:

border-top-widthdefiniert den Rahmentyp für oben
border-left-widthdefiniert den Rahmentyp für links
border-right-widthdefiniert den Rahmentyp für rechts
border-bottom-widthdefiniert den Rahmentyp für unten

Rahmenfarbe definieren

Folgende Angaben zum color sind möglich:

redFarbnamen
#FF0000Hexadezimalzahlen
rgb(255,0,0)RGB-Farbe

Das border-color-Attribut kann nochmals aufgeteilt werden:

  style="border-top-color:red; border-left-color:#00FF00;
  border-right-color:blue; border-bottom-color:rgb(125,255,255)"

Dabei bedeutet:

border-top-colordefiniert den Rahmentyp für oben
border-left-colordefiniert den Rahmentyp für links
border-right-colordefiniert den Rahmentyp für rechts
border-bottom-colordefiniert den Rahmentyp für unten

Mehrere Werte im Attribut

Man kann auch mehrere Werte angeben, z.B. border:double solid dotted;. Dabei bedeutet:

1 Angabe- Rahmen rundherum
2 Angaben- die erste Angabe für oben und unten, die zweite Angabe für rechts und links
3 Angaben- die erste Angabe für oben, die zweite Angabe für rechts und links, die dritte für unten
4 Angaben- die erste Angabe für oben, die zweite Angabe für rechts, die dritte für unten und die vierte für links

Abgerundete Ecken

Ein Blick in die Zukunft. Mit CSS 3 ist es möglich, abgerundete Ecken darzustellen. Einige moderne Browser können es schon heute. Für die Gecko-Browser (Netscape, Mozilla und Firefox) muß das Prefix -moz-; und für KHTML-Browser (Konqueror) das Prefix -khtml-, und für Safari das Prefix -webkit- angegeben werden.

-moz-border-radiusVier abgerundete Ecken
-moz-border-radius-topleftAbgerundete Ecken oben links
-moz-border-radius-toprightAbgerundete Ecken oben rechts
-moz-border-radius-bottomleftAbgerundete Ecken unten links
-moz-border-radius-bottomrightAbgerundete Ecken unten rechts
-khtml-border-radiusVier abgerundete Ecken
-khtml-border-radius-topleftAbgerundete Ecken oben links
-khtml-border-radius-toprightAbgerundete Ecken oben rechts
-khtml-border-radius-bottomleftAbgerundete Ecken unten links
-khtml-border-radius-bottomrightAbgerundete Ecken unten rechts
-webkit-border-radiusVier abgerundete Ecken
-webkit-border-radius-topleftAbgerundete Ecken oben links
-webkit-border-radius-toprightAbgerundete Ecken oben rechts
-webkit-border-radius-bottomleftAbgerundete Ecken unten links
-webkit-border-radius-bottomrightAbgerundete Ecken unten rechts
  <html>
  <head>
   <title>Abgerundete Ecken</title>
   <style type="text/css">
    * {
      font-family: Arial, Helvetica, sans-serif;
    }
    #box { 
     margin: 10px;
     padding: 20px;
     font-size: 14px;
     color: #00A;
     width: 200px;
     height: 200px;
     display: block;
     border: 1px solid #888;
     -moz-border-radius: 10px;
     -khtml-border-radius: 30px;
     -webkit-border-radius: 10px;
     border-radius: 10px;
   }
   </style>
  </head>
  <body>
    <h1>Abgerundete Ecken</h1>
    <div id="box">Beispiel</div>
    <a href="../index.php?seite=c_rahmen#ecken">Zurück zum Kurs</a>
  </body>
  </html>

Das ganze sieht so aus

back top next