Menentukan Radius untuk Sudut Tertentu

Jika kita sebelumnya telah membuat border radius untuk semua sisi sudut mungkin sekarang timbul pertanyaan bagaimana jika kita ingin membuat radius hanya untuk bagian sudut tertentu?
Ok, coba anda buat script seperti berikut ini:

<html>
<head>
<style>
div{
    color        :white;
    text-align    :center;
    padding        :20px;
    margin        :5px;
    }
.border{
    background    :#00ccff;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    }

.atas{
    background    :#00ccff;
    border-radius:10px 10px 0px 0px;
    -moz-border-radius:10px 10px 0px 0px;
    -webkit-border-radius:10px 10px 0px 0px;
    }

.bawah{
    background    :#00ccff;
    border-radius:0px 0px 10px 10px;
    -moz-border-radius:0px 0px 10px 10px;
    -webkit-border-radius:0px 0px 10px 10px;
    }

</style>
</head>
<body>
<div class='border'> Menggunakan border dengan radius 10px disetiap sudutnya</div>
<div class='atas'> Menggunakan border untuk kedua sisi atas</div>
<div class='bawah'> Menggunakan border untuk kedua sisi bawah</div>
<div class='box'> border biasa</div>
</body>
</html>

Sekarang coba anda jalankan pada browser kesangan anda, maka anda akan mendapatkan tampilan seperti pada gambar berikut:

Penjelasan kode:

<div class='border'></div>
<div class='atas'></div>
<div class='bawah'> </div>
Pertama kita membuat 3 box dengan tag <div></div> masing-masing dengan kita beri class border,atas, dan bawah.
-moz-border-radius:5px;
Membuat radius 5px untuk keempat sudut box. Properti ini dijalankan jika browser Mozilla firefox.
-webkit-border-radius:5px;
Membuat radius 5px untuk keempat sudut box. Properti ini dijalankan jika browser selain Mozilla Firefox.
.border{
    background    :#00ccff;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    }
Memberi style pada class border
.atas{
    background    :#00ccff;
    border-radius:10px 10px 0px 0px;
    -moz-border-radius:10px 10px 0px 0px;
    -webkit-border-radius:10px 10px 0px 0px;
    }
Memberi style pada class atas (box yang kedua)
.bawah{
    background    :#00ccff;
    border-radius:0px 0px 10px 10px;
    -moz-border-radius:0px 0px 10px 10px;
    -webkit-border-radius:0px 0px 10px 10px;
    }
Memberi style pada class bawah

Sekian penjelasan saya tentang menentukan radius untuk setiap sudut. Jika terdapat kesalahan dalam artikel ini saya mohon maaf.

salam

TCindent Naturalisi