Februari 28, 2012

Membuat Sudut Lengkung Pada Garis Border

Situseo Blog : Dengan hadirnya css3 untuk membuat sudut garis border lengkung atau tumpul sudah bisa dilakukan, dengan design tampilan garis lengkung pada border bisa menghasilkan tampilan blog yang elegant, manis dan menarik.

Penggunaan kode css garis border lengkung adalah dengan menggunakan kode border-radius, penggunaan dalam template saya ilustrasikan sebagai berikut :

border-radius: 7px;
border: 2px solid #72C7F8;

border-radius sebesar 7px akan menghasilkan garis lengkung seukuran angka tersebut pada setiap sudut-sudutnya, baik itu sudut kiri atas, kanan atas, kiri bawah dan kanan bawah. Untuk membuat sudut garis border berbeda pada setiap sudutnya, kita harus memberi keterangan perintah tambahan pada kode css nya, sebagai contoh saya akan membuat sudut lengkung pada bagian kanan atas suatu border dengan angka lengkung sebesar 30px, kode css yang di pakai adalah :

border-radius: 30px 0px 0px 0px; 
-moz-border-radius: 30px 0px 0px 0px; 
-webkit-border-radius: 30px 0px 0px 0px; 
border: 2px solid #72C7F8;

Keterangan :
moz = mozila, webkit = chrome dan safari, keterangan moz dan webkit merupakan perintah terhadap browser supaya efek tersebut bisa berjalan jika menggunakan browser tersebut.
border adalah perintah untuk bagian garis sisi-sisinya
radius adalah kode perintah untuk membuat sudut lengkung
30px = bagian atas 0px = kanan 0px  = bawah 0px = kiri, angka kelengkungan dari sudut border
border: 2px solid #72C7F8 keterangan garis border setebal 2px dengan jenis garis solid dan warna garis #72C7F8.

Dalam keterangan diatas mengunakan jenis garis border solid, masih banyak jenis garis yangbisa kita pergunakan untuk kesesuian dari border-border yang kita pergunakan, untuk mengetahui jenis-jenis garis border bisa mengetahui melalui link tersebut.

Hasil dari kode tersebut seperti ini :


GARIS LENGKUNG KIRI ATAS 30PX


Untuk menentukan kelengkungan garis border yang 30px dengan garis border dengan ruang border yang berbeda akan menghasilkan garis lengkung yang berbeda, untuk menyesuaikan garis lengkung border sesuaikan dengan lebar ruang border yang akan diberi garis lengkung pada sisinya.

Untuk contoh garis-garis lengkung lainnya, kalian bisa meng-klik link demo dibawah.




Semoga bermanfaat,

12 Diskusi untuk Membuat Sudut Lengkung Pada Garis Border

11 Maret 2012 08.28  

akhirnya.. masalah ane terpecahkan.. ane, dapet kode dari tetangga sbelah,, tapi g ada keterangan yang untuk mozila atw chrome..
alhasil, efeknya cuma bisa fungsi di mozzila.. :D

24 Maret 2012 07.18  

thanks alot bro...thats all i need since couple dayz ago. :D

24 Maret 2012 12.44  

@a.h sama2 bro, semoga post ini bisa membantu

26 Maret 2012 01.38  

ini kodenya ditaru dimana yaa?
maaf masih newbie ^_^

26 Maret 2012 03.07  

@Rohmat Julianto itu kode css, jadi tempatkan pada bagian kode css yang akan kalian modifikasi

21 April 2012 20.03  

@san sansetuja

Mantap bro,thank yh

25 Juni 2012 23.53  

keren abis ne blog, boleh tau gak ya gimana cara nya bisa buat blog seperti ini

22 November 2012 11.55  

Makasih infonya....
Salam Sukses.

24 Desember 2012 00.28  

keren nih trik..... ini yang saya cari2 tq..!! salam kenal aja dari Rahmatdi99 blog kalo berkenan kunjung balik yah

25 Desember 2012 11.41  

jikalau saya ingin merubah tampilan Judul "ARSIP BLOG", saya harus menambahkan dimananya? saya sdh coba2 tapi masih blm ketemu jg......thanks a lot, jawabanya sanat ditunggu bos

3 Agustus 2014 16.35  

tampilan blog nya bagus banget mas, tips di blog nya jg membantu banget

Posting Komentar

supaya diskusi berjalan baik, gunakan tombol jawab untuk reply. penggunaan tombol jawab, jangan menghapus kode komentar pada kotak komentar, cukup mengetikan komentar disebelah atau dibawah kode komentar. Terima kasih.

rate this post
beri nilai posting ini
Terima kasih,

Template by Dicas Blogger | Modifikasi ulang oleh Mas Dalang

101011  ©Situseo Blog | Powered by Blogger | Back to Top