Referensi Border-Radius Property CSS 3 dan Penerapan nya
Jurnalcode.com

Referensi Border-Radius Property CSS 3 dan Penerapan nya

Referensi Border-Radius Property CSS 3 dan Penerapan nya


Jurnalcode : Dengan menggunakan CSS scripting dapat membuat tampilan website atau aplikasi menjadi lebi elegan dan menarik ,  saat ini hampir seluruh website didunia ini sudah menggunakan CSS sebagai scripting untuk mempercantik website mereka .

Saat ini sudah banyak Framework CSS yang dapat kita gunakan secara gratis , bahkan dapat membantu kita mempercepat project yang sedang kita kerjakan . baiklah sekarang saya akan membahas tentang  Border-Radius Property CSS 3 dan Penerapan nya.

# Penerapan Border Radius Pertama

<style>
#contoh1 {
    border-radius: 25px;
    background: #309;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#contoh2 {
    border-radius: 25px;
    border: 2px solid #309;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#contoh3 {
    border-radius: 100%;
    padding: 20px;
    width: 200px;
    height: 150px;
	background:#306;
	border:#CF0 solid 5px;
}
</style>

<!-- Penerapan Ke HTML -->

<div id="contoh1"></div><br>
<div id="contoh2"></div><br>
<div id="contoh3"></div>

 

Hasil dari script di atas adalah sebagai berikut :

 

# Penerapan Border - Radius kedua

<style>
#contoh4 {
    border-radius: 15px 50px 30px 5px;
    background: #006;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#contoh5 {
    border-radius: 15px 50px 30px;
    background: #33C;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#contoh6 {
    border-radius: 15px 50px;
    background: #C06;
    padding: 20px;
    width: 200px;
    height: 150px;
}
</style>
<div id="contoh4"></div><br>
<div id="contoh5"></div><br>
<div id="contoh6"></div>

 

Hasil dari script di atas adalah sebagai berikut :

# Penerapan Border-Radius ketiga

<style>
#contoh7 {
    border-radius: 50px/15px;
    background: #FC6;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#contoh8 {
    border-radius: 15px/50px;
    background: #09F;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#contoh9 {
    border-radius: 50%;
    background: #C3C;
    padding: 20px;
    width: 200px;
    height: 150px;
}
</style>
<div id="contoh7"></div><br>
<div id="contoh8"></div><br>
<div id="contoh9"></div>

 

Hasil dari script di atas adalah sebagai berikut :

 

Baiklah sekian referensi tentang Border Radius  nah Bagaimana dengan Support Border Radius dengan Browser mari kita lihat :

 

Salam coder dan selamat ber ekplorasi lagi .. terimakasih

.

Ayo Komentar