Hallo sahabat dumenity berjumpa lagi dalam tutorial Dumetschool, pada tutorial kali ini saya akan membahas tentang cara penerapan border pada css3. Apa sih sebenernya border itu, border bisa di ibaratkan seperti garis tepi atau bisa dibilang juga garis batas sesuai dengan namanya border. Border dalam membuat website biasa sering digunakan untuk membuat bingkai sebuah elemen HTML seperti gambar atau untuk membuat kotak batas sebuah elemen HTML dan masih banyak lagi.

CSS border ini sangat banyak sekali jenis – jenis atau bentuknya, seperti di bawah ini contoh jenis border.

Berikut ini nilai – nilai yang digunakan dalam border:

  • dotted – Mendefinisikan perbatasan bertitik
  • dashed – Mendefinisikan perbatasan putus-putus
  • solid – Mendefinisikan sebuah perbatasan yang solid
  • double – Mendefinisikan perbatasan ganda
  • groove – Mendefinisikan sebuah perbatasan berlekuk 3D. Efeknya tergantung pada nilai border-color
  • ridge – Mendefinisikan sebuah perbatasan bergerigi 3D. Efeknya tergantung pada nilai border-color
  • inset – Mendefinisikan sebuah perbatasan inset 3D. Efeknya tergantung pada nilai border-color
  • outset – Mendefinisikan sebuah perbatasan awal 3D. Efeknya tergantung pada nilai border-color
  • none – Mendefinisikan ada batas
  • hidden – Mendefinisikan perbatasan tersembunyi

Oke sekarang saya akan memberikan contoh bagaimana cara penerapan border dalam  membuat website, langsung saja simak di bawah ini:

Oke jika perhatikan dari contoh script di atas maka akan menghasilkan sebuah output seperti di bawah ini:

Cara Penerapan Border pada CSS3

Oke sekarang saya memberikan contoh penggunaan 2 tipe border dalam satu elemen html, lihat di bawah ini:

Dari script di atas saya memberikan contoh penerapan border atas bawah dotted dan kanan kirinya bertipe solid maka hasilnya seperti di bawah ini:

Cara Penerapan Border pada CSS3

Oke bagaimana teman – teman cukup mudah bukan tentang cara penerapan border pada CSS3, Oke itulah pembahasan saya tentang Cara Penerapan Border pada CSS3 semoga dapat bermanfaat.