06. CSS Borders.docx

8/19/2019 06. CSS Borders.docx

1/12

CSS Borders

Properti CSS Border

Properti CSS Border memungkinkan Anda untuk menentukan gaya, lebar, dan warna

perbatasan elemen ini.

Elemen ini memiliki perbatasan alur yang 15px lebar dan hiau.

Style Border

Border!style properti menentukan enis perbatasan apa yang akan ditampilkan.

"ilai!nilai berikut yang dii#inkan$

• dotted ! %ende&inisikan perbatasan bertitik

• dashed ! %ende&inisikan perbatasan putus!putus

• solid ! %ende&inisikan sebuah perbatasan yang solid

• double ! %ende&inisikan perbatasan ganda• groo'e! %ende&inisikan sebuah perbatasan berlekuk (). E&eknya tergantung pada

nilai border!*olor

• ridge ! %ende&inisikan sebuah perbatasan bergerigi (). E&eknya tergantung pada

nilai border!*olor

• inset ! %ende&inisikan sebuah perbatasan inset (). E&eknya tergantung pada nilai

border!*olor

• outset ! %ende&inisikan sebuah perbatasan awal (). E&eknya tergantung pada nilai

border!*olor

• none ! %ende&inisikan ada batas• hidden ! %ende&inisikan perbatasan tersembunyi

Border!style properti dapat memiliki dari satu sampai empat nilai +untuk perbatasan atas,

batas kanan, batas bawah, dan perbatasan kiri.

Contoh

p.dotted {border-style: dotted;}

p.dashed {border-style: dashed;}

p.solid {border-style: solid;}

p.double {border-style: double;}

p.groove {border-style: groove;}

p.ridge {border-style: ridge;}

p.inset {border-style: inset;}

p.outset {border-style: outset;}

p.none {border-style: none;}

p.hidden {border-style: hidden;}

p.mix {border-style: dotted dashed solid double;}


2/12

Catatan$

-idak ada si&at perbatasan CSS -/E0 dielaskan di bawah akan memiliki e&ek apapun

ke*uali border!style properti diatur

Lebar Border

Border!width properti menentukan lebar empat perbatasan.

2ebar dapat diatur sebagai ukuran tertentu +dalam px, pt, *m, em, dll atau dengan

menggunakan salah satu dari tiga nilai yang telah ditentukan$ tipis, sedang, atau tebal.

Border!width properti dapat memiliki dari satu sampai empat nilai +untuk perbatasan atas,


Contoh

p.one {

border-style: solid;

border-width: 5px;

}

p.two {


border-width: medium;

}

p.three {



3/12

border-width: 2px 10px px 20px;

}

Warna Border

Border!*olor properti digunakan untuk mengatur warna dari empat perbatasan.

warna dapat diatur oleh$

• nama ! menentukan nama warna, seperti 3merah3

• /ex ! menentukan nilai hex, seperti 34 &&3

• 06B ! menentukan nilai 06B, seperti 3rgb +755,,3

• transparant

Border!*olor properti dapat memiliki dari satu sampai empat nilai +untuk perbatasan atas,


8ika border!*olor tidak diatur, itu mewarisi warna dari elemen.

Contoh

p.one {


border-!olor: red;

}

p.two {


border-!olor: green;

}


4/12

p.three {


border-!olor: red green blue yellow;

}

Border – Individual Sides

)ari *ontoh di atas Anda telah melihat bahwa adalah mungkin untuk menentukan

perbatasan yang berbeda untuk setiap sisi.

)alam CSS, ada uga properti untuk menentukan masing!masing perbatasan +atas, kanan,

bawah, dan kiri$

Contoh

p {

border-top-style: dotted;

border-right-style: solid;

border-bottom-style: dotted;

border-le"t-style: solid;

}


5/12

Contoh di atas memberikan hasil yang sama seperti ini$

Contoh

p {

border-style: dotted solid;

}

8adi, di sini adalah *ara keranya$

8ika border!style properti memiliki empat nilai$

• border!style$ dotted double solid dashed9

o batas atas dihiasio batas kanan solid


6/12

o batas bawah adalah ganda

o perbatasan kiri putus!putus

8ika border!style properti memiliki tiga nilai$

• border!style$ dotted solid double9

o batas atas dihiasio perbatasan kanan dan kiri yang padat

o batas bawah adalah ganda

8ika border!style properti memiliki dua nilai$

• border!style$ dotted solid9

o batas atas dan bawah yang putus!putus

o perbatasan kanan dan kiri yang padat

8ika border!style properti memiliki satu nilai$

• border!style$ dotted9

o keempat perbatasan yang putus!putus

Border!style properti digunakan dalam *ontoh di atas. "amun, ia uga bekera dengan

border!width dan border!*olor .

Border – Properti Shorthand

Seperti yang dapat Anda lihat dari *ontoh di atas, ada banyak si&at yang perlu

dipertimbangkan ketika berhadapan dengan perbatasan.

:ntuk mempersingkat kode, uga memungkinkan untuk menentukan semua properti

perbatasan indi'idu dalam satu properti.

-he perbatasan properti adalah properti singkatan untuk properti border indi'idu berikut$

• border!width

• border!style +waib

• border!*olor

Contoh

p {

border: 5px solid red;

}


7/12

Contoh Lebih

Semua properti perbatasan atas dalam satu deklarasi

Contoh ini menunukkan properti singkat untuk setting semua properti untuk perbatasan atas

dalam satu deklarasi.

%engatur gaya perbatasan bawah

Contoh ini menunukkan bagaimana untuk mengatur gaya perbatasan bawah.

%engatur lebar dari perbatasan kiri

Contoh ini menunukkan bagaimana untuk mengatur lebar perbatasan kiri.

%engatur warna dari empat perbatasan

Contoh ini menunukkan bagaimana untuk mengatur warna dari empat perbatasan. /al ini

dapat memiliki dari satu sampai empat warna.

%engatur warna dari batas kanan

Contoh ini menunukkan bagaimana untuk mengatur warna dari batas kanan.


8/12

Latihan

Latihan 1

Jawaban :

Analisa :

:ntuk membuat sebuah elemen memiliki perbatasan bertitik dengan ketebalan ; pixel.

Properti style yang dibutuhkan adalah border!style dotted dan border!width ;px.


9/12

Latihan 2

Jawaban :

Analisa :

)alam style border terdapat banyak properti seperti memberi warna perbatasan elemen.

Properti yang digunakan adalah border!*olor.


10/12

Latihan

Jawaban :

Analisa :

)alam memberikan properti perbatasan pada elemen html.


11/12

Latihan !

Jawaban :

Analisa :


12/12

Se"ua Properti CSS Border

Properti

06. CSS Borders.docx

Documents

Transcript of 06. CSS Borders.docx