CSS Kanten abrunden

Allgemeine Lösung, um Browserunabhängig Kanten abzurunden



Browserunabhängige Lösung zum Abrunden von Formularkanten
Abgerundete Formularkanten in Internetseiten werden immer beliebter, doch nur Mozilla basierende Browser unterstützen dieses Feature durch den Befehl >>-moz-border-radius<<. Alle anderen Browser ignorieren den Befehl und stellen den Inhalt ohne Abrundung dar!


Die meisten Seitenbetreiber lösen dieses Problem indem sie vier weiße ecken als Grafik erstellen, und an jeder der vier Eckpunkte platzieren. Dies ist jedoch keine besonders elegante Lösung.

Durch ein paar Griffe in die Trickkiste können wir dieses Dilemma aber umgehen.


Trick zum Browerunabhängigen Abrunden von Formularkanten
Um nun eine Kante doch abrunden zu können, behelfen wir uns folgendem Trick.

Wir nehmen einige Linien und platzieren diese übereinander oder nebeneinander. Jede Linie zeichnen wir dabei etwas größer oder etwas kleiner als die vorhergehende. Wenn wir diese Linien danach an eine Box hängen und etwas mit den Umrandungsfarben und den Hintergrundfarben spielen, erhalten wir spielendeinfach eine Box mit abgerundeten Kanten.

Bsp.:


--
------
---------
---------
------
--



 Als Vorlage, habe ich das Codebeispiel von >>nifty<< verwendet 

/** rounding.css */
 
p{margin: 0 0px;}
.roundBox{ margin: 0 10%;}
 
b.rtop, b.rbottom{display: block;}
b.rtop b, b.rbottom b{display: block; height: 1px; overflow: hidden;}
b.r1{margin: 0 5px;}
b.r2{margin: 0 3px;}
b.r3{margin: 0 2px;}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px; height: 2px;}
 
<div class="roundBox">
	<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
	<p>
		Body
	</p>
	<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
Das komplette Beispiel habe ich etwas modifiziert, und in eine PHP-Klasse gesteckt. Das Ergebnis dieser Tat ist nun eine einfach zu bedienende Klasse, welcher als Parameter lediglich die Boxbreite und die entsprechenden Farbe mitgeteilt werden muss.

 
<?php
/*
RoundContainer.class.php5
Gibt eine Box mit runden Kanten aus
 
 
Autor      : Joachim Ruf
Erstellt am: 2009.04.13
 
Doku:
1.1	2009-04-13	:	Erstellung der Klasse
*/
 
 
 
 
class Rounding
{
 
 
 
/**
 * @desc Konstruktor. Klasse zur Verwaltung von Freundschaften.
 */    
function __construct ( )
{
  $host = '../'; // $GLOBALS['host']
 
  // benoetigte Elemente inkludieren
  echo '<style type="text/css">@import "'.$host.'css/rounding.css";</style>';
 
  return true;
}	
 
 
 
/**
 * @desc Gibt eine Box mit abgerundeten Kanten aus.
 * @param String $width : Breite der Box Angabe in {%|px|em}. Bsp.: 100%, 500px, ...
 * @param String $content : Anzuzeigender Inhalt. Text, Html-Code, etc
 * @param color $borderColor : Umrandungsfarbe. Bsp.: #969, #996699, black, ...
 * @param color $bgColor : Hintergrundfarbe Bsp.: #969, #996699, black, ...
 * @param color $edgeColor : Farbe der Ecke Bsp.: #969, #996699, black, ...
 * @param int $padding : Innerer Abstand (links,oben,unten,rechts)
 * @return string
*/
public function get ( $content, $width = '100%', $borderColor = '#000', $bgColor = '#eee', $edgeColor = '#fff', $padding = '5px 10px 20px 5px' )
{
  return '
    <div class="roundBox" style="background-color: '.$bgColor.'; width: '.$width.';">
    <b class="rtop" style="background: '.$edgeColor.';">
      <b class="r1" style="background-color: '.$borderColor.';"></b>
      <b class="r2" style="background-color: '.$bgColor.'; border-left: solid 1px '.$borderColor.'; border-right: solid 1px '.$borderColor.';"></b>
      <b class="r3" style="background-color: '.$bgColor.'; border-left: solid 1px '.$borderColor.'; border-right: solid 1px '.$borderColor.';"></b>
      <b class="r4" style="background-color: '.$bgColor.'; border-left: solid 1px '.$borderColor.'; border-right: solid 1px '.$borderColor.';"></b>
    </b>
    <p style="padding: '.$padding.'; border-left: solid 1px '.$borderColor.'; border-right: solid 1px '.$borderColor.';">
				'.$content.'
    </p>
    <b class="rbottom" style="background: '.$edgeColor.';">
      <b class="r4" style="background-color: '.$bgColor.'; border-left: solid 1px '.$borderColor.'; border-right: solid 1px '.$borderColor.';"></b>
      <b class="r3" style="background-color: '.$bgColor.'; border-left: solid 1px '.$borderColor.'; border-right: solid 1px '.$borderColor.';"></b>
      <b class="r2" style="background-color: '.$bgColor.'; border-left: solid 1px '.$borderColor.'; border-right: solid 1px '.$borderColor.';"></b>
      <b class="r1" style="background-color: '.$borderColor.';"></b>
    </b>
    </div>
  ';
}
 
 
 
}
 
 
 
?>
// Verwendungsbeispiel
 
$cRounding = new Rounding();
echo $cRounding->get('mein Content 1', '50%', 'black', '#9c9', '#fff');
echo '<br />';
echo $cRounding->get('mein Content 2', '500px', 'blue', '#fff', '#fff', '10px');
echo '<br />';
echo $cRounding->get('mein Content 3', '300px;', 'blue', 'blue', '#fff', '50px');
 
unset($cRounding); // Klassenvariable löschen
 

Abgerundete Fomrularkante mit CSS [Bild nicht erreichbar]



Download:
 PHP5 Klasse + CSS-Code zum Abrunden von Formularkanten


Siehe auch:
 CSS Slants, Kanten abschrägen