Cara Membuat Garis Border Melengkung - Pada artikel sebelumnya, saya sudah menjelaskan tentang cara menambahkan garis border dan
macam macam garis border
untuk gambar di artikel atau di blog. Pada artikel ini, masih dengan
topik yang sama akan dilanjutkan lebih spesifik lagi tentang
garis border dengan tampilan yang berbeda dari sebelumnya yaitu membuat
garis border melengkung. Maksud dari
garis border melengkung
ini adalah kita akan membuat garis border yang memiliki sudut
melengkung dari setiap pojok yang digunakan dalam menampilkan sebuah
bingkai gambar seperti yang terlihat pada tampilan gambar berikut ini
Demo dan Kode
Tepi Kiri Kanan Melengkung
Kode: <div
style="-moz-border-radius: 20px 10px 20px 10px; -webkit-border-radius:
20px 10px 20px 10px; background-color: #cccccc; border-radius: 20px;
border: 2px solid black; color: black; font-family: Arial; padding:
5px;">Tepi Kiri Kanan Melengkung</div>
Pojok Kiri Atas Melengkung
Kode: <div
style="-moz-border-radius: 1em 0em 0em 0em; background-color: orange;
border-radius: 1em 0em 0em 0em; border: 2px solid #000; color: white;
height: auto; margin: 0 auto; overflow: hidden;">Pojok Kiri Atas
Melengkung</div>
Pojok Kiri Bawah Melengkung
Kode: <div
style="-moz-border-radius: 0em 0em 0em 1em; background-color: green;
border-radius: 0em 0em 0em 1em; border: 2px solid #000; color: white;
height: auto; margin: 0 auto; overflow: hidden;">Pojok Kiri Bawah
Melengkung</div>
Pojok Kanan Atas Melengkung
Kode: <div
style="-moz-border-radius: 0em 1em 0em 0em; background-color: red;
border-radius: 0em 1em 0em 0em; border: 2px solid #000; color: white;
height: auto; margin: 0 auto; overflow: hidden;">Pojok Kanan Atas
Melengkung</div>
Pojok Kanan Bawah Melengkung
Kode: <div
style="-moz-border-radius: 0em 0em 1em 0em; background-color: blue;
border-radius: 0em 0em 1em 0em; border: 2px solid #000; color: white;
height: auto; margin: 0 auto; overflow: hidden;">Pojok Kanan Bawah
Melengkung</div>
Tepi Kiri Melengkung
Kode: <div
style="-moz-border-radius: 1em 0em 0em 1em; background-color: gold;
border-radius: 1em 0em 0em 1em; border: 2px solid #000; color: white;
height: auto; margin: 0 auto; overflow: hidden;">Tepi Kiri
Melengkung</div>
Tepi Kanan Melengkung
Kode: <div
style="-moz-border-radius: 1em 0em 0em 1em; background-color: royalblue;
border-radius: 1em 0em 0em 1em; border: 2px solid #000; color: white;
height: auto; margin: 0 auto; overflow: hidden;">Tepi Kanan
Melengkung</div>
Untuk membuat tampilan seperti diatas. Anda cukup menambahkan kode-kode yang ada diatas untuk setiap jenis
garis border melengkung kedalam artikel
gambar di area postingan
Itulah
cara membuat garis border melengkung. Untuk tampilan yang lebih dan memiliki keunikan tersendiri, silahkan atur kode-kode berikut yang ada didalam kode diatas
-moz-border-radius: 0em 0em 0em 1em;
border-radius: 0em 0em 0em 1em;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 20px;
background-color: #ccc;
border: 2px solid black;
color: #000;
padding: 5px;
Silahkan ganti dan atur setiap skala (nomer ukuran) yang ada diatas dan
lihat hasilnya dengan perubahan yang anda lakukan. Maaf saya tidak bisa
menjelaskan lebih lanjut untuk mengatur skala ini karena hal ini
semata-mata untuk mendorong anda agar lebih kreatif dan imajinatif dalam
mengaplikasikan sebuah panduan.
