Border radius (untuk membuat efek sudut melengkung)

Berbagai Contoh Penggunaan Border Radius

K-wanKOe pembaca yang setia berikut tips membuat border radius, dimana kita bisa mengaplikasikannya pada sebuah table kotak maupun image (foto) baik langsung saja saya berikan contohnya :

Gambar Asli

#Contoh_A { height: 150px; width:200px; -moz-border-radius-bottomright: 50px; border-bottom-right-radius: 50px; }
#Contoh_B { height: 150px; width:200px; -moz-border-radius-bottomright: 50px 25px; border-bottom-right-radius: 50px 25px; }
#Contoh_C { height: 150px; width:200px; -moz-border-radius-bottomright: 25px 50px; border-bottom-right-radius: 25px 50px; }
#Contoh_D { height: 150px; width:200px; -moz-border-radius: 1em 4em 1em 4em; border-radius: 1em 4em 1em 4em; }
#Contoh_E { height: 150px; width:200px; -moz-border-radius: 25px 10px / 10px 25px; border-radius: 25px 10px / 10px 25px; }
#Contoh_F { height: 150px; width:200px; -moz-border-radius: 35px; border-radius: 35px; }

Jika diaplikasikan kedalam sebuah image kurang lebih seperti ini :

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn2TwWNcbBVoIp0cF4-ahuJeIZKetfLhpeyjmVFiVc3r4FCQtKL9hOD3F0BG3jvFghK89TiIucDYjgUtPpdxjH8rK_wPH8Oxd9TBemWbuXpTz5LcDf8AmRhj-OqOvbEOJFKXlOoh4c1XNw/s1600/Windows+Photo+Viewer+Wallpaper.jpg" style="-moz-border-radius: 25px 10px / 10px 25px; border-radius: 25px 10px / 10px 25px; float: left; height: 150px; margin: 5px 10px; width: 200px;" />

Silahkan copy dinotepad dan masukkan ke blog/web anda
Biru : link image
Merah : border radius
Hijau : ukuran image

Semoga dapat membantu anda dalam membuat tampilan blog / web berbasis HTML yang lebih cantik

12:56 PM