Mecha versi 2.6.3 sudah dirilis!

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..!!

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.