Membina Kotak Berbucu Bulat Tanpa Imej

1. Cipta fail bernama atas.php dan masukkan kod di bawah

<? echo '<div id="container">
<b class="rtop">
  <b class="r1"  style="background-color:'.$warna.'"></b> <b class="r2" style="background-color:'.$warna.'"></b> <b class="r3" style="background-color:'.$warna.'"></b> <b class="r4" style="background-color:'.$warna.'"></b>
</b>
<div class="isi" style="background-color:'.$warna.'">';
 
?>

2. Cipta fail bernama bawah.php dan masukkan kod di bawah

<? 
echo '</div>
<b class="rbottom">
  <b class="r4" style="background-color:'.$warna.'"></b> <b class="r3" style="background-color:'.$warna.'"></b> <b class="r2" style="background-color:'.$warna.'"></b> <b class="r1" style="background-color:'.$warna.'"></b>
</b>
</div> ';
 
?>

3. Cipta fail bernama style.css dan masukkan kod di bawah

.rtop *, .rbottom *{
	display: block;
	height: 1px;
	overflow: hidden;
}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px} 
.isi
{
	padding-top: 3px;
	padding-right: 15px;
	padding-bottom: 3px;
	padding-left: 15px;
}

4. Masukkan kod dibawah sebelum </head>

<link rel="stylesheet" type="text/css" href="style.css" />

5. Masukkan kod di bawah untuk membina kotak yang dikehendaki

<? $warna='blue'; ?>
<? include ('atas.php'); ?>
masukkan je la apa2 content kat sini tidak kira html ataupun php
 
<? include ('bawah.php'); ?>