CSS ROUNDED CORNER DESIGN
CSS ROUNDED CORNER DESIGN – Bagaimana cara membuat rounded corner dan variasinya akan dibahas pada postingan ini. Salah satu style yang paling favorit saya gunakan adalah css rounded box ini. Karena dengan menggunakan tampilan ini bisa mempercantik tampilan blog ini. Seperti yang saya gunalan pada style template blog ini. Kodenya cukup simple dan mudah hanya butuh pemahaman saja.
 |
| css border radius |
VARIASI CSS ROUNDED CORNER
Berikut ini beberapa variasi kode css yang digunakan untuk membuat css rounded corner
Inti dari penggunaan kode css ini adalah menggunakan kode border-radius dan ukuran border.
border: ukuranborder style border(solid/dashed/dotted) warna;
border-radius: kiriatas kananatas kananbawah kiribawah;
contoh kode css rounded corner
border: 3px solid #FF7A00;
border-radius: 10px 10px 10px 10px;
1. Tampilan Budar
Untuk kode css rounded corner tampilan bundar menggunakan kode berikut :
.bundar {
background:#332A21;
border: 3px solid #FF7A00;
border-radius: 10px 10px 10px 10px;margin: 30px;
padding: 20px;
text-align: center; width: 300px;
}
Contoh Tampilan kode css rounded corner bundar :
 |
| rounded corner bundar |
2. Tampilan ketupat
Untuk kode css rounded corner tampilan ketupat menggunakan kode berikut :
.ketupat {
background: #666;
border-radius: 0px 20px 0px 20px; border: 3px solid #FF7A00;
margin: 30px;
padding: 20px;
text-align: center;
width: 300px;
}
atau
.ketupat {
background: #666;
border-radius: 20px 0px 20px 0px; border: 3px solid #FF7A00;
margin: 30px;
padding: 20px;
text-align: center;
width: 300px;
}
Contoh Tampilan css rounded corner ketupat :
 |
| css rounded corner ketupat |
3. Tampilan Window
Untuk kode css rounded corner tampilan window menggunakan kode berikut :
.window {
background: #666;
border-radius: 20px 20px 0px 0px;
border: 3px solid #FF7A00;
margin: 30px;
padding: 20px;
text-align: center;
width: 300px;
}
atau
.window {
background: #666;
border-radius: 20px 20px 0px 0px;
border: 3px solid #FF7A00;
margin: 30px;
padding: 20px;
text-align: center;
width: 300px;
}
Contoh Tampilan css rounded corner window :
 |
| css rounded corner window |
4. Tampilan Label
Untuk kode css rounded corner tampilan label menggunakan kode berikut :
.label {
background: #666;
border-radius: 0px 20px 20px 0px;
border: 3px solid #FF7A00;
margin: 30px;
padding: 20px;
text-align: center;
width: 300px;
}
atau
.label {
background: #666;
border-radius: 20px 0px 0px 20px; border: 3px solid #FF7A00;
margin: 30px;
padding: 20px;
text-align: center;
width: 300px;
}
Contoh Tampilan css rounded corner label :
 |
| css rounded corner label |
Pada intinya kita disini hanya dibutuh kreatifitas saja untuk mengatur CSS ROUNDED CORNER DESIGN tersebut dengan memainkan value yang ada pada bagian border-radius: 20px 20px 20px 20px . Semoga postingan kali ini bisa bermanfaat bagi anda, selamat mencoba
