CSS Border, dari A sampai Zet

Tabel Konten
  1. border-style: solid; 
  2. border-style: dashed; 
  3. border-style: dotted; 
  4. border-style: inset; 
  5. border-style: outset; 
  6. border-style: double; 
  7. border-style: groove; 
  8. border-style: ridge; 
  9. border-style: none; 
  10. Properti border dibagi menjadi tiga aspek: 
  11. Contoh Penerapan 
  12. Menggabungkan Tiga Deklarasi Border dalam Satu Properti 
  13. Memecah Border Menjadi Empat Sisi 
Warning Line

Berikut ini adalah beberapa jenis border yang paling umum digunakan:

border-style: solid; 

border-style: dashed; 

border-style: dotted; 

border-style: inset; 

border-style: outset; 

border-style: double; 

border-style: groove; 

border-style: ridge; 

border-style: none; 

Properti border dibagi menjadi tiga aspek: 

  • border-width
  • border-style
  • border-color
  • border-width:
    border-width digunakan untuk menentukan tebal border. Umumnya menggunakan satuan piksel, atau bisa juga menggunakan ukuran relatif: thin (tipis), medium (sedang), atau thick (tebal).
  • border-style:
    border-style digunakan untuk menentukan tipe border.
  • border-color:
    border-color digunakan untuk menentukan warna border. Umumnya menggunakan warna HEX, atau bisa juga menggunakan warna RGB atau menuliskan nama warna secara langsung.

Contoh Penerapan 

Top-DownInline
<style type='text/css'> #contoh-border { border-width:4px; border-style:solid; border-color:#ffa500; } </style> ...... <div id='contoh-border'>OBJEK</div><div style='border-width:4px;border-style:solid;border-color:#ffa500;'> OBJEK </div>

Menggabungkan Tiga Deklarasi Border dalam Satu Properti 

Properti border-width, border-style dan border-color bisa digabungkan dalam satu properti saja yaitu border, dengan urutan seperti berikut:
border: 4px solid #ffa500;
border: border-width border-style border-color;

Memecah Border Menjadi Empat Sisi 

Properti border juga bisa dipecah menjadi empat sisi seperti ini:
DeklarasiKeterangan
border-top: 4px solid #ffa500;Menentukan tampilan border sebelah atas
border-right: 4px solid #ffa500;Menentukan tampilan border sebelah kanan
border-bottom: 4px solid #ffa500;Menentukan tampilan border sebelah bawah
border-left: 4px solid #ffa500;Menentukan tampilan border sebelah kiri

Penerapan yang lebih detail dapat menggunakan teori yang pertama, dengan dua jenis metode pemecahan sisi:

DeklarasiKeterangan
border-top-width: 4px;Menentukan tebal border sebelah atas
border-right-width: 4px;Menentukan tebal border sebelah kanan
border-bottom-width: 4px;Menentukan tebal border sebelah bawah
border-left-width: 4px;Menentukan tebal border sebelah kiri
border-top-style: solid;Menentukan tipe border sebelah atas
border-right-style: solid;Menentukan tipe border sebelah kanan
border-bottom-style: solid;Menentukan tipe border sebelah bawah
border-left-style: solid;Menentukan tipe border sebelah kiri
border-top-color: #ffa500;Menentukan warna border sebelah atas
border-right-color: #ffa500;Menentukan warna border sebelah kanan
border-bottom-color: #ffa500;Menentukan warna border sebelah bawah
border-left-color: #ffa500;Menentukan warna border sebelah kiri
DeklarasiKeterangan
border-width: 4px 2px 7px 0px;Urutan valuenya adalah:
  1. top
  2. right
  3. bottom
  4. left
border-style: solid dotted dashed none;
border-color: red green blue orange;

9 Komentar

  • Coretan Hidup

    Infonya menarik dan menambah pengetahuan saya :)

  • Unknown

    mas . . maaf ngrepotin lagi .. hehehe
    mau tanya kalau slidenya mau di taruh komentar. terus konten komentarnya tuh yang mana? saya belum tau konten komentar mas biar bisa di slide kayak punya mas gini. . . mohon bantuannya ya mas :)

  • Unknown

    cara naruh border di blockquote gmna sob?

  • Admin 3

    makasih mas tipsnya, padahal saya mau nanya cara bkin border titik2 eh skalinya udah ada tutorialnya, lengkap lg..!!

  • Mhicyko Ahada Nakatama

    makasih infonya, semoga tips ini bisa saya praktekkan di blog jelek saya
    hehe

  • Taufik Nurrohman

    @Mhicyko Ahada NSemoga berhasil! :)

  • Unknown

    mas mau nanya soal border di main-wrap di blog saya hehe

    ini di bagian main wrap nya kayak gini

    nah, tapi pas buka postingannya jadi kayak gini

    yg mau saya tanyakan cuma, gimana cara ngilangin border main-wrap saat di postingannya, biar terlihat rapi. :D

    ditunggu jawabannya mas =p*

    • Taufik Nurrohman

      Coba pakai tag kondisional halaman statis dan item:

      <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <style>
      #main-wrapper {
      border:none;
      margin:0 0;
      padding:0 0;
      -webkit-box-shadow:none;
      -moz-box-shadow:none;
      box-shadow:none;
      }
      </style>
      </b:if>
      </b:if>

      Letakan di atas kode </head>

  • tes

    info yang sangat membantu dan menambah wawasan saya :-bd

Komentar telah ditutup.