Media informasi Entertainment, Tutorial Blogger, Blogger Template, Fakta Unik, Teknologi, And More

Search This Blog

Cara Membuat Garis Border Melengkung


Cara Membuat Garis Border Melengkung


Kali ini kita akan membahas tentang cara membuat garis border melengkung, untuk garis border melengkung ini biasa di sebut moz border radius, yaitu agar border di blog menjadi radius atau melengkung, gk perlu basa-basi lagi..

Ini dia...


Garis Border

Melengkung

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.

Demikian, jika ada kesulitan atau perbedaan ide mari kita diskusikan bersama dengan berkomentar untuk artikel ini, semoga bermanfaat.

Berilah Blog

Post a Comment