Porperties untuk mengatur border menggunkan CSSBorder merupakan garis pinggir yang sering digunakan untuk membingkai atau memberi garis batas suatu elemen bagian isi tersebut. Di aritkel ini ilmukita akan menjelaskan fungsi-fungsi dan cara pengunaan jenis-jenis properties untuk mengatur border menggunakan CSS.

Porperties untuk mengatur border menggunkan CSS

  1. Border style
    Properties border style digunkan untuk mengatur jenis border yang akan di tampilkan. Berikut daftar properties border style :

    Properties Keterangan
    border-style mengatur seluruh sisi border
    border-top-style mengatur jenis border bagian atas
    border-right-style mengatur jenis border bagian kanan
    border-bottom-style mengatur jenis border bagian bawah
    border-left-style mengatur jenis border bagian kiri

    Berikut daftar value yang ada di properties border style

    Value Keterangan
    dotted menampilkan border berupa garis titik-titik
    dashed menampilkan border berupa garis putus-putus
    solid menampilkan border berupa garis padat (lurus)
    double menampilkan border double garis
    groove mendefinisikan sebuah border groove (beralur) 3D
    ridge menampilkan border 3D bergerigi (ridge)
    inset menampilkan border 3D inset (timbul kedalam)
    outset menampilkan border 3D timbul keluar (outset)
    none Mendefinisikan border ditiadakan
    hidden Mendefinisikan border dianggap hilang

    Contoh

    Output

    mengatur seluruh sisi border

    border-style: dotted;

    mengatur border bagian kiri

    border-left-style: solid;

    mengatur border bagian atas dan bawah

    border-top-style: dotted; border-bottom-style: solid;
  2. Border width
    Propeties border width digunakan untuk mengatur ketebalan border.Berikut daftar properties border width :

    Properties Keterangan
    border-width mengatur seluruh sisi ketebalan  border
    border-top-width mengatur ketebalan  border bagian atas
    border-right-width mengatur ketebalan  border bagian kanan
    border-bottom-width mengatur ketebalan  border bagian bawah
    border-left-width mengatur ketebalan  border bagian kiri

    Untuk mengisi value properties border width kita bisa menggunakan  satuan ukuran seperti px,em atau %. (Menganal satuan ukuran yang sering digunakan di CSS).
    Contoh

    Output

    mengatur ketebalan seluruh sisi border

    border-style: dotted; border-width: 10px;

    mengatur ketebalan border bagian kiri

    border-left-style: solid; border-left-width: 10px;

    mengatur ketebalan border bagian atas dan bawah

    border-top-style: dotted; border-bottom-style: solid; border-top-width: 10px; border-bottom-width: 10px;
  3. Border color
    Properties border color digunkan untuk mewarnai border.Berikut cara daftar properties border color :

    Properties Keterangan
    border-color mengatur seluruh sisi warna  border
    border-top-color mengatur warna  border bagian atas
    border-right-color mengatur warna  border bagian kanan
    border-bottom-color mengatur warna  border bagian bawah
    border-left-color mengatur warna  border bagian kiri

    Dimana untuk mengisi value bisa menggunakan metode nama warna,RGB dan HEX.
    contoh

    Output

    mengatur warna seluruh sisi border

    border-style: dotted; border-color:#1d8209;

    mengatur warna border bagian kiri

    border-left-style: solid; border-left-color:rgb(29,130,9);

    mengatur warna border bagian atas dan bawah

    border-top-style: dotted; border-bottom-style: solid; border-top-color:green; border-bottom-color:green;
  4. Rounded border
    Properties rounded digunkan untuk mengatur lengkungan siku-siku border.Berikut daftar properties rounded border :

    Properties Keterangan
    border-radius mengatur lengkungan border seluruh siku-siku
    border-top-left-radius mengatur lengkungan border siku atas bagian kiri
    border-top-right-radius mengatur lengkungan border siku atas bagian kanan
    border-bottom-right-radius mengatur lengkungan border siku bawah bagian kanan
    border-bottom-left-radius mengatur lengkungan border siku bawah bagian kiri

    Untuk mengisi value properties rounded border kita bisa menggunakan  satuan ukuran seperti px,em atau %. (Menganal satuan ukuran yang sering digunakan di CSS).
    contoh

    Output

    mengatur rounded border seluruh siku-siku

    border-radius: 25px;

    mengatur rounded border di kiri bagian atas

    border-top-left-radius: 25px;

    mengatur rounded border di kiri bagian atas dan di kanan bagian bawah

    border-top-left-radius: 25px; border-bottom-right-radius: 25px;

baca juga :

Porperties untuk mengatur margin menggunkan CSS

LEAVE A REPLY

Please enter your comment!
Please enter your name here