Belajar CSS

Belajar CSS : Properties Untuk Mengatur Border

padingbordermargin

Border style

Border style digunakan untuk mendefinisikan bentuk border yang akan digunakan.

Ada beberapa format penulisan property border  yang bisa digunakan yaitu

Format penulisan border style dengan 4 value :

border-style : valueT valueR valueB valueL;

keterangan :

valueT : untuk mengatur  border style top (bagian atas)

valueR : untuk mengatur border style right (bagian kanan)

valueB : untuk mengatur border style bottom (bagian bawah)

value: untuk mengatur border style left (bagian kiri)

format penulisan border style dengan 3 value :

border-style : valueT  valueRL  valueB ;

keterangan :

valueT             : untuk mengatur border style top (bagian atas)

valueRL           :untuk mengatur border style right (bagian kanan) dan Left (bagian kiri)

valueB             : untuk mengatur border style bottom (bagian bawah)

format penulisan border style dengan 2 value :

border-style : valueTB  valueLR  ;

keterangan :

valueTB           : untuk mengatur border style top (bagian atas) dan bottom (bagian bawah)

valueLR           : untuk mengatur border style left (bagian kiri) dan right (bagian kanan)

format penulisan border style dengan 1 value :

Border-style : value;

keterangan :

format penulisan border style dengan 1 value ,artinya value (top,right,bottom,left) sudah ditentukan nilainya(value).

format penulisan border secara detail (individu) :

border-top-style: value;

border-right-style: value;

border-bottom-style: value;

border-left-style: value;

keterangan :

border-top-style                    : untuk mengatur style border top(bagian atas)

border-right-style                  : untuk mengatur style border right(bagian kanan)

border-bottom-style             : untuk mengatur style border bottom(bagian bawah)

border-left-style                    : untuk mengatur style border left(bagian kiri)

value : solid,double,groove,dotted,dashed,inset,outset,ridge,hidden

contoh

border-style

Border width

Border width digunakan untuk mengatur ketebalan border.

Ada beberapa format penulisan property border  yang bisa digunakan yaitu

Format penulisan border width dengan 4 value :

border-width : valueT valueR valueB valueL;

keterangan :

valueT : untuk mengatur ketebalan border  top (bagian atas)

valueR : untuk mengatur ketebalan border right (bagian kanan)

valueB : untuk mengatur ketebalan border bottom (bagian bawah)

value: untuk mengatur ketebalan border left (bagian kiri)

format penulisan border width dengan 3 value :

border-width : valueT  valueRL  valueB ;

keterangan :

valueT             : untuk mengatur ketebalan border top (bagian atas)

valueRL           :untuk mengatur ketebalan border right (bagian kanan) dan Left (bagian kiri)

valueB             : untuk mengatur ketebalan border bottom (bagian bawah)

format penulisan border width dengan 2 value :

border-width : valueTB  valueLR  ;

keterangan :

valueTB           : untuk mengatur ketebalan border top (bagian atas) dan bottom (bagian bawah)

valueLR           : untuk mengatur ketebalan border left (bagian kiri) dan right (bagian kanan)

format penulisan border width dengan 1 value :

border-width : value  ;

keterangan :

format penulisan border width dengan 1 value ,artinya value (top,right,bottom,left) sudah ditentukan nilainya(value).

format penulisan border secara detail (individu) :

border-top-width : value;

border-right-width: value;

border-bottom-width: value;

border-left-width: value;

keterangan :

border-top-width                  : untuk mengatur ketebalan border top(bagian atas)

border-right-width                : untuk mengatur ketebalan border right(bagian kanan)

border-bottom-width                       : untuk mengatur ketebalan border bottom(bagian bawah)

border-left-width                  : untuk mengatur ketebalan border left(bagian kiri)

untuk memberian value-nya bisa menggunakan length/panjang angka dalam (px, em, in, cm) atau keyword (thin, medium, thick).

contoh

border-width

Border color

Border color digunakan untuk mewarnai boder.

Ada beberapa format penulisan property border  yang bisa digunakan yaitu

Format penulisan border color dengan 4 value :

border-color : valueT valueR valueB valueL;

keterangan :

valueT : untuk mengatur warna border  top (bagian atas)

valueR : untuk mengatur warna border right (bagian kanan)

valueB : untuk mengatur warna border bottom (bagian bawah)

value: untuk mengatur warna border left (bagian kiri)

format penulisan border color dengan 3 value :

border-color : valueT  valueRL  valueB ;

keterangan :

valueT : untuk mengatur warna border top (bagian atas)

valueRL           :untuk mengatur warna border right (bagian kanan) dan Left (bagian kiri)

valueB             : untuk mengatur warna border bottom (bagian bawah)

format penulisan border color dengan 2 value :

border-color : valueTB  valueLR  ;

keterangan :

valueTB           : untuk mengatur warna border top (bagian atas) dan bottom (bagian bawah)

valueLR           : untuk mengatur warna border left (bagian kiri) dan right (bagian kanan)

format penulisan border color dengan 1 value :

border-color : value  ;

keterangan :

format penulisan border color dengan 1 value ,artinya value (top,right,bottom,left) sudah ditentukan nilainya(value).

format penulisan border color  secara detail (individu) :

border-top-color: value;

border-right-color: value;

border-bottom-color: value;

border-left-color: value;

keterangan :

border-top-color                   : untuk mengatur warna border top(bagian atas)

border-right-color                 : untuk mengatur warna border right(bagian kanan)

border-bottom-color                        : untuk mengatur warna border bottom(bagian bawah)

border-left-color                   : untuk mengatur warna border left(bagian kiri)

cara untuk memberian value-nya silahkan baca di metode memberian warna di css.

contoh

border-color

LEAVE A REPLY

Please enter your comment!
Please enter your name here