Cara Penerapan Border pada CSS3

Hallo sahabat dumenity berjumpa lagi dalam tutorial Dumetschool, pada tutorial kali ini saya akan membahas tentang cara penerapan border pada css3. Apa sih sebenernya border itu, border bisa di ibaratkan seperti garis tepi atau bisa dibilang juga garis batas sesuai dengan namanya border. Border dalam membuat website biasa sering digunakan untuk membuat bingkai sebuah elemen HTML seperti gambar atau untuk membuat kotak batas sebuah elemen HTML dan masih banyak lagi.

CSS border ini sangat banyak sekali jenis – jenis atau bentuknya, seperti di bawah ini contoh jenis border.

Berikut ini nilai – nilai yang digunakan dalam border:

dottedÂ – Mendefinisikan perbatasan bertitik
dashedÂ – Mendefinisikan perbatasan putus-putus
solidÂ – Mendefinisikan sebuah perbatasan yang solid
doubleÂ – Mendefinisikan perbatasan ganda
grooveÂ – Mendefinisikan sebuah perbatasan berlekuk 3D. Efeknya tergantung pada nilai border-color
ridgeÂ – Mendefinisikan sebuah perbatasan bergerigi 3D. Efeknya tergantung pada nilai border-color
insetÂ – Mendefinisikan sebuah perbatasan inset 3D. Efeknya tergantung pada nilai border-color
outsetÂ – Mendefinisikan sebuah perbatasan awal 3D. Efeknya tergantung pada nilai border-color
noneÂ – Mendefinisikan ada batas
hiddenÂ – Mendefinisikan perbatasan tersembunyi

Oke sekarang saya akan memberikan contoh bagaimana cara penerapan border dalamÂ membuat website, langsung saja simak di bawah ini:

<!DOCTYPE html>
<html>
<head>
<style>
p.one {
    border-style: solid;
    border-color: red;
}

p.two {
    border-style: solid;
    border-color: green;
} 

p.three {
    border-style: solid;
    border-color: red green blue yellow;
} 
</style>
</head>
<body>

<h2>Cara penerepan border</h2>
<p>This property specifies the color of the four borders:</p>

<p class="one">A solid red border</p>
<p class="two">A solid green border</p>
<p class="three">A solid multicolor border</p>
<p><b>Note:</b> The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>

</body>
</html>

Oke jika perhatikan dari contoh script di atas maka akan menghasilkan sebuah output seperti di bawah ini:

Oke sekarang saya memberikan contoh penggunaan 2 tipe border dalam satu elemen html, lihat di bawah ini:

<style>
p {
    border-top-style: dotted;
    border-right-style: solid;
    border-bottom-style: dotted;
    border-left-style: solid;
}
</style>

Dari script di atas saya memberikan contoh penerapan border atas bawah dotted dan kanan kirinya bertipe solid maka hasilnya seperti di bawah ini:

Oke bagaimana teman – teman cukup mudah bukan tentang cara penerapan border pada CSS3, Oke itulah pembahasan saya tentangÂ Cara Penerapan Border pada CSS3 semoga dapat bermanfaat.

Kategori