Tips-Cara-Membuat-Border-dengan-CSS-Nyekrip

Apakah kita ingin agar gambar atau salah satu elemen dalam halaman web kita memiliki border? Jika iya, mari kita bahas tutorial tips cara membuat border dengan css. Properti Border pada CSS memungkinkan kita untuk mengatur dan menyesuaikan border di sekitar elemen HTML.

Dalam properti border kita bisa menggunakan teknik shorthand untuk mengatur nilai properti border di dalam satu tempat. Properti ini bisa diatur mulai dari tebal atau lebar, warna dan gaya atau style pada border.

Ada tiga properti utama dalam mengatur border:

  • border-style :- Menentukan style pada border, apakah mau solid, garis putus-putus, garis ganda, atau kombinasi.
  • border-color :- Menentukan warna dari border.
  • border-width :- Menentukan tebal atau lebar dari border.

Selain ketiga properti utama diatas, ada satu lagi properti dengan menggunakan teknik shorthand css.

  • border :- Menentukan ukuran, menentukan bentuk, menentukan warna.

Mengenal Properti Border-style CSS

Properti border-style ini mendefinisikan jenis border (style border) yang akan ditampilkan. Dibawah ini adalah skrip untuk menentukan gaya yang bisa digunakan:

Secara berurutan skrip border-style diatas akan menampilkan gambar seperti berikut ini:

border_style_Tips_Cara_Membuat_Border_dengan_CSS_nyekrip

Border Style

Contoh penggunaan Properti Border-style CSS

Berikut adalah contoh skrip yang menunjukkan beberapa gaya border yang telah disebutkan di atas. Kita dapat mengatur properti border secara berbeda pada empat sisi elemen.

Jika kita jalankan skrip diatas, maka akan nampak seperti gambar berikut.

Memakai_empat_style_Tips_Cara_Membuat_Border_dengan_CSS_Nyekrip

Memakai empat style border

Mengenal Properti  Border-width CSS

Properti border-width membantu kita untuk mengatur lebar dari border. Kita bisa mengatur properti border dengan value thin (tipis), medium (sedang) atau-pun thick (tebal).

Kita juga dapat mengatur lebar border dalam satuan piksel. Pada saat mengatur lebar dari border, satu hal harus diingat bahwa properti ini tidak akan bekerja jika berdiri sendiri, untuk itu kita perlu mengatur style dari border terlebih dahulu.

Perhatikan skrip berikut:

Skrip diatas akan menampilkan border seperti gambar berikut.

Memakai_border_Width_Tips_Cara_Membuat_Border_dengan_CSS_Nyekrip

Memakai Border Width

Contoh penggunaan Properti Border-width CSS

Contoh skrip berikut ini akan membantu kita untuk memahami dalam mengatur lebar dari border. Kita dapat mengatur lebar border secara berbeda pada empat sisi elemen. Sebagai informasi bahwa dalam penulisan css dalam contoh skrip  ini menggunakan teknik embedded style, untuk teknik lainnya silahkan kunjungi tutorial Tips Cara menggunakan CSS pada HTML .

Catatan: Lebar border akan menjadi 0 atau absolute jika border-style diatur menjadi none atau absolute.

Lebar_Border_Berbeda_Tips_Cara_Membuat_Border_dengan_CSS_Nyekrip

Lebar Border yang Berbeda

Mengenal Properti  Border-color CSS

Properti border-color digunakan untuk memberikan warna pada border. Kita bisa mengatur warna dasar untuk border:

Untuk mengatur warna pada border, kita bisa menggunakan 3 cara seperti berikut

  • Nama – nama warna, seperti white untuk warna putih.
  • RGB – nilai RGB, seperti rgb(255,255,255) untuk warna putih.
  • Hex – nilai hex, seperti #ffffff untuk warna putih.

Jika kita tidak mengatur warna pada border, maka warna akan di set secara default untuk mengikuti warna elemen.

Border_dengan_berbagai_warna_Tips_Cara_Membuat_Border_dengan_CSS_Nyekrip

Border dengan berbagai warna

Contoh penggunaan Properti Border-color CSS

Dalam contoh skrip ini kita akan menentukan warna border dengan cara yang berbeda pada setiap sisi elemen, seperti yang ditunjukkan pada skrip berikut ini:

Skrip diatas jika dijalankan akan nampak seperti gambar berikut.

Border_dengan_4_warna_Tips_Cara_Membuat_Border_dengan_CSS_Nyekrip

Border dengan 4 warna

Mengenal Shorthand pada Properti Border

Setelah kita mempelajari properti pada border, kita bisa menyimpulkan bahwa terdapat tiga properti utama yaitu:

  • Border-style: Mengatur Style Border
  • Border-width: Mengatur Lebar Border
  • Border-color: mengatur warna border

Sangat merepotkan jika kita mengatur border harus mengetikkan ketiga properti diatas, untuk mengatasi hal ini kita bisa menggunakan teknik shorthand border dengan mengetikkan tiga value (style, width,color) dalam satu properti, dan properti itu adalah properti border.

Perhatikan skrip berikut dan lihat perbedaannya.

Skrip tanpa menggunakan teknik shorthand.

Skrip dengan menggunakan teknik shorthand.

Kedua skrip diatas memberikan efek yang sama, tapi jelas perbedaannya terdapat pada keringkasan dalam pengetikan skrip. Perlu diperhatikan tentang cara penulisan teknik shorthand memiliki struktur border: border-style border-width border-color;.

Sekarang kita sudah mengerti bagaimana cara membuat border dengan css, cukup mudah bukan? Biasakan untuk selalu menggunakan teknik shorthand karena teknik ini memiliki kelebihan yaitu keringkasan dalam mengetik skrip dan ukuran file CSS yang dihasilkan juga semakin kecil sehingga akan meningkatkan kecepatan loading web kita.

Jangan hanya dibaca, segera praktek agar cepat menguasai teknik shorthand, jika ada pertanyaan silahkan sampaikan lewat kolom komentar dibawah ini. Terimakasih.

Happy Nyekrip!

About The Author

Comments

  1. ade

    saya masih newbie nih gan..
    tapi nanti saya coba belajar 🙂

    tutorial tentang cara membuat border sangat lengkap .
    terimakasih gan tutorialnya

    1. Admin Article Author

      #mainDiv {
      height: 100px;
      width: 80px;
      position: relative;
      border-bottom: 2px solid #f51c40;
      background: #3beadc;
      }

      #borderLeft {
      border-left: 2px solid #f51c40;
      position: absolute;
      top: 50%;
      bottom: 0;
      }

  2. Bahas Grammar

    Waah, saya banyak belajar dari web ini. Sebenarnya sudah bolak-balik lihat artikel yang itu-itu aja. Soalnya sering lupa scriptnya. Makasih gan.

  3. FIRST MEDIA

    Keren gan sumpah gan, gak nanggung-nanggung buat artikelnya paket komplit spesial nih namanya, ini yang lagi saya cari. Sangat bermanfaat dan membantu gan, terima kasih. Sukses selalu gan…

Tinggalkan Balasan

Alamat surel Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *