Bermain-main dengan border-radius

Assalamu'alaikum Wr. Wb.

balik lagi nih setelah dua hari tidak posting sama sekali.. :3

OK kagak pakai banyak Bacot lagi simaklah pekerjaan saya berikut ini  :) 

Sudahkah kalian mengenal apa itu border?

kalau belum (saya beri gambaran sedikit mengenai border) XD ..

Border adalah garis tepi pada sidebar, posting, header, footer, dll. (di blog) dan border sendiri hanya berbentuk persegi, maupun pesegi panjang. Nah untuk memodivikasi border itu maka gunakanlah border-radius.

dan tahukah kalian apakah itu border radius?

border radius adalah salah satu property css3, sedangkan fungsi dari border-radius adalah untuk membuat lengkungan pada box-box tag html!

OK sekarang kita menuju ke tutorial dan anggaplah sudah mempunyai CSS dan HTMLnya.

Highlight code untuk html dan script

<div id="border"><h2>Border</h2></div>

Highlight code untuk CSS

#border{  
width:600px;  
background: #000;  
color: #cd0000;  
border: 2px solid blue;  
padding: 10px;  
border-radius: 15px; /*Kode pembuat lengkungan sudut*/  
}

Hasil :

Border Biasa

nah diatas adalah border persegi yang biasa..
sekarang kita coba buat yang melengkung dengan border radius.

Kode di bawah ini Tambahkan ke CSS ke yang di atas

border-radius: 15px; /*Kode pembuat lengkungan sudut*/  

Hasil:

Dengan Border Radius

Diatas adalah border dalam keadaan lengkungan yang sama pada setiap sudutnya. Sama halnya dengan border yang biasanya kita buat jug bisa dilakukan secara terpisah-pisah. Perhatikan CSS Berikut ini dan PAHAMI !

border-top-left-radius: 15px; => /*digunakan jika kita hanya ingin membuat lengkungan pada sudut kiri atas.*/  
border-top-right-radius: 15px; => /*digunakan jika kita hanya ingin membuat lengkungan pada sudut kanan atas.*/  
border-bottom-right-radius: 15px; => /*digunakan jika kita hanya ingin membuat lengkungan pada sudut kanan bawah.*/  
border-bottom-left-radius: 15px; => /*digunakan jika kita hanya ingin membuat lengkungan pada sudut kiri bawah.*/

Diatas adalah kode-kode untuk border radius (sudut pada border). Kalian bisa mengubah ukuran dari 15px ke ukuran yang kalian inginkan.
Selain dilakukan secara terpisah-pisah bisa juga dilakukan dengan menyingkatnya. Perhatikan Struktur dibawah ini.

1. Border-radius: 15px 0px;
Dengan perintah tersebut hasilnya sama dengan perintah individu:
border-top-left-radius: 15px;
border-top-right-radius: 0px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 0px;

2. Border-radius: 0px 15px; 
Dengan perintah tersebut hasilnya sama dengan perintah individu:
border-top-left-radius: 0px;
border-top-right-radius: 15px;
 border-bottom-right-radius: 0px;
 border-bottom-left-radius: 15px;

3. Border-radius: 15px 15px 0px; 
Dengan perintah tersebut hasilnya sama dengan perintah individu:
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 15px;

4. Border-radius: 0 15px 15px;
Dengan perintah tersebut hasilnya sama dengan perintah individu
border-top-left-radius: 0px;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
 border-bottom-left-radius: 15px;

5. Border-radius: 15px 0 15px;
Dengan perintah tersebut hasilnya sama dengan perintah individu:
border-top-left-radius: 15px;
border-top-right-radius: 0px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 0px;

6. Border-radius: 0px 0 15px;
Dengan perintah tersebut hasilnya sama dengan perintah individu: 
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 0px;

7. Border-radius: 15px 0 0 15px;
Dengan perintah tersebut hasilnya sama dengan perintah individu:
border-top-left-radius: 0px;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 0px;

8. Border-radius: 0 15px 15px 0;
Dengan perintah tersebut hasilnya sama dengan perintah individu:
border-top-left-radius: 15px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 15px;

Dan Masih banyak lagi.. :v
OK Sekian dari saya apabila ada kalimat atau kata-kata yang kurang memuaskan maka saya mohon maaf yang sebesar-besarnya... ^_^

Wassalamu'alaikum Wr. Wb.