Belajar CSS Mengubah border dengan CSS

Belajar CSS Part 9 : Mengubah border dengan CSS


Belajar CSS Mengubah border dengan CSS

Pada tutorial kali ini di www.malasngoding.com kita akan membahas tentang manipulasi border dengan menggunakan CSS . CSS memungkinkan kita untuk memanipulasi atau mengubah ukuran, warna, dan gaya atau bentuk pada border. Misalnya border yang berbentuk titik-titik, strip dan yang bermodel biasa saja .

untuk contoh mengubah border dengan CSS silahkan simak penjelasan berikut ini.

Mengubah Border Style

Pada CSS terdapat banyak gaya atau model untuk membuat garis. Ada yang berbentuk titik-titik, berbentuk garis yang putus-putus, garis ganda dan banyak lagi style/gaya yang bisa di gunakan pada garis dengan CSS . untuk membuat garis sekaligus memberikan value style yang kita inginkan kita bisa menggunakan property css border-style. silahkan perhatikan contoh di bawah ini.

index.html

style.css

Berikut adalah contoh border-style saat di jalankan pada browser

 

contoh border style css

contoh border style css

Mengatur Ukuran Border CSS

Untuk mengatur ukuran pada border kita bisa menggunakan property css yaitu border-width.berikut ini adalah contoh cara penulisan property border-width untuk membuat ukuran garis.

 

index.html

style.css

dan perhatikan ukuran garis setelah kita mengaturnya dengan border-width.

mengatur ukuran garis dengan border-width

mengatur ukuran garis dengan border-width

Memberi warna pada border

untuk memberikan warna pada garis gunakan property css yaitu border-color. berikut adalah contoh membuat warna pada garis menggunakan CSS.

index.html

style.css

Belajar CSS Mengubah border dengan CSS

Belajar CSS Mengubah border dengan CSS

Cara cepat memanipulasi border dengan CSS

Cara untuk memanipulasi atau mengubah border dengan cepat menggunakan CSS kita bisa langsung menggunakan property css border. dan mengisi langsung value ukuran, jenis garis dan warna. untuk cara cepat memanipulasi border dengan css silahkan perhatikan contoh berikut ini.

index.html

style.css

perhatikan pada contoh syntax css di atas. untuk mengubah border dengan cepat bisa langsung menyisipkan ukuran, jenis border dan warna yang di inginkan di dalam property border. Belajar CSS Mengubah border dengan CSS

contoh di atas berarti border yang di maksud berukuran 1px, dengan jenis border solid dan berwarna biru. maka hasilnya.

Belajar CSS Mengubah border dengan CSS

Belajar CSS Mengubah border dengan CSS

Dan berikut adalah beberapa property lain yang di gunakan untuk mengubah tampilan border dengan CSS.

 

 

  • border-bottom, Mengatur garis yang terletak di bawah.
  • border-bottom-color, Mengatur warna garis yang terletak di bawah.
  • border-bottom-style, Mengatur style garis yang terletak di bawah.
  • border-bottom-width, Mengatur ukuran garis yang terletak di bawah.
  • border-color, Mengatur warna garis.
  • border-left, Mengatur garis yang terletak di sebelah kiri.
  • border-left-color, Mengatur warna garis yang terletak di sebelah kiri.
  • border-left-style, Mengatur style garis yang terletak di sebelah kiri.
  • border-left-width, Mengatur ukuran garis yang terletak di sebelah kiri.
  • border-right, Mengatur garis yang terletak di sebelah kanan.
  • border-right-color, Mengatur warna garis yang terletak di sebelah kanan.
  • border-right-style, Mengatur style garis yang terletak di sebelah kanan.
  • border-right-width, Mengatur ukuran garis yang terletak di sebelah kanan.
  • border-style, Mengatur style garis.
  • border-top, Mengatur garis yang terletak di sebelah atas.
  • border-top-color, Mengatur warna garis yang terletak di sebelah atas.
  • border-top-style, Mengatur style garis yang terletak di sebelah atas.
  • border-top-width, Mengatur ukuran garis yang terletak di sebelah atas.
  • border-width, Mengatur ukuran garis.

Incoming search terms:

  • belajar border pada css
  • jenis border kiri kanan style css
  • Cara merubah panjang border link
  • cara mengubah bentuk style dan bolder
  • cara mengubah bentuk stle pada border
  • cara menghapus titik titik no border
  • cara membuat border titik titik
  • cara memberi warna border di css
  • border style pada css
  • memanipulasi border css




About the author
Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.


Discussion
  • No Comment

Write a Comment

Your email address will not be published. Required fields are marked *