Home » » Membuat Sudut Lengkung Pada Sudut Garis

Membuat Sudut Lengkung Pada Sudut Garis

Membuat Sudut Lengkung Pada Garis Border

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 :

radius, penggunaan dalam template saya ilustrasikan sebagai berikut :

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.

Semoga bermanfaat....!!!
Share this article :

42 komentar:

  1. Wah keren nih ilmu garis lengkungnya mas bro..

    BalasHapus
    Balasan
    1. makasih Gan, met sore...!!!!

      Hapus
  2. wah tutorialnya detail nih, makasi ya sob udh share, salam blogger ;D heheh

    BalasHapus
    Balasan
    1. terima kasih kembali Gan, salam kembali :)

      Hapus
  3. mkin nambah keren nih membuat sudut lengkung nya..


    manstapp

    BalasHapus
    Balasan
    1. terimakasih Gan, selamat mlm aja Gan...!! :)

      Hapus
  4. nice post gan...

    kunjungan balik n follow..!!

    BalasHapus
    Balasan
    1. Terimakasih atas kunjungannya Gan, selamat mlm...!!! :)

      Hapus
  5. thx sharex ya sob.., tuk lbh mudahx pake tollsx aja..., bnyk ko yg yg online.. *smile

    BalasHapus
    Balasan
    1. oke deh Gan akan saya coba kedepannya, makasih kembali Gan selamat mlm :)

      Hapus
  6. keren sob... sama sperti yang saya lakukan..
    btw.. maaf nih edit meta tagnya sob, biar ga jadi "your description here" :)

    BalasHapus
    Balasan
    1. makasih kang atas kunjungannya, dan terimakasih juga atas pemberitahuannya kang, sukses buat kang imet :)

      Hapus
  7. wah ini dia yg saya cari cari sobat, terima kasih banyak ilmunya sobat, sangat berguna buat saya
    terima kasih

    BalasHapus
    Balasan
    1. sama sama Gan, terimakasih kembali atas partisipasinya Gan...!!!

      Hapus
    2. Oke juga gan saya juga banyak terima kasih atas duungan anda yg sangat bermanfaat
      sukses gan..

      Hapus
    3. makasih Gan atas semuanya :)

      Hapus
  8. Selamat sore gan apa kabar...?

    BalasHapus
    Balasan
    1. selamat sore kembali Gan, sukses buat Agan..!! :)

      Hapus
  9. Balasan
    1. selamat mlm kembali Gan, thanks partisipasinya Gan, salam kenal :)

      Hapus
  10. Mantap gan tutorialnya....ane baru pertama kali dapat tutorial beginian...salam kenal gan

    BalasHapus
    Balasan
    1. Terimakasih Gan, salam kenal kembali, dan selamat mlm Gan...! :)

      Hapus
  11. Maksih sobat berbagi ilmunya di sini.
    Salam kenal dan salam persahabatan

    BalasHapus
    Balasan
    1. sama sama Gan, terimakasih kembali atas partisipasinya dan salam kenal kembali Gan...!!!

      Hapus
  12. .. bagus nich. ijin simpen dulu ach,, ..

    BalasHapus
    Balasan
    1. silahkan mbak, terimakasih kembali atas partisipasinya, selamat pagi, sukses untuk sampean mbak..! :)

      Hapus
  13. nice share sob...makin nambah ilmu ane....
    #commenback

    BalasHapus
    Balasan
    1. terimakasih kembali Gan, sukses untuk anda Gan. :)

      Hapus
  14. Balasan
    1. apanya Gan yg nanti ??? heeee :)

      Hapus
  15. Ilmu baru ini mas, Thanks udah share tutorialnya mas :)

    BalasHapus
    Balasan
    1. tarimakasih kembali Gan sukses buat anda...!!! :)

      Hapus
  16. Terimakasih informasinya ya, oh iya udah saya FollBack di #18
    terimakasih udah follow blog saya, salam persahabatan :D

    BalasHapus
    Balasan
    1. sama-sama, makasih kembali atas partisipasinya.. :)

      Hapus
  17. oh, ternyata begitu ya membuat lengkungan
    baru tau aku, hehehe

    BalasHapus
    Balasan
    1. heee... makasih Gan, partisipasinya :)

      Hapus
  18. Pelajaran yang baik untuk saya nih sob sebagai beginner...

    BalasHapus
  19. Masih bingung mas.. Hmm

    BalasHapus

Kepada Kawan - Kawan Semua, Berkomentarlah dengan baik dan sopan.
Jika ada Embel - Embel Link mohon maaf, komentar akan saya hapus.


 
Support : Your Link | Your Link | Your Link
Copyright © 2013. Net- Blog ™ - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger