Cara Mengatur Style Border CSS

Pada materi yang lau kita telah belajar bagaimana mewarnai background sebuah box dengan css. Selanjutnya kita akan belajar mengatur style border dari box tersebut. Jika kita ingat tentang shapes di aplikasi seperti word atau photoshop maka background bisa kita samakan dengan fill pada shapes dan border sebagai outline nya. Untuk tujuan desain halaman web tentu border sangat membantu membuat tampilan lebih manis.

#file html
<!DOCTYPE html>
<html>
<head>
<title>Border</title>
<link rel="stylesheet" type="text/css" href="border.css">
</head>
<body>
<div class="kotak">
Kotak 1
</div>
<div class="kotak2">
Kotak 2
</div>
<div class="kotak3">
Kotak 3
</div>
<div class="kotak4">
Kotak 4
</div>
<div class="kotak5">
Kotak 5
</div>
<div class="kotak6">
Kotak 6
</div>
<div class="kotak7">
Kotak 7
</div>
<div class="kotak8">
Kotak 8
</div>
</body>
</html>


#file css (border.css)
.kotak{
border-style: solid;
width: 100px;
height: 100px;
background-color: #7df;
border-width: 20px;
border-color: #444444;
float: left;
margin-right: 5px;
display: flex;
align-items: center;
justify-content: center;
}

.kotak2{
border-style: dotted;
width: 100px;
height: 100px;
background-color: #7af;
border-width: 20px;
border-color: #444444;
float: left;
margin-right: 5px;
display: flex;
align-items: center;
justify-content: center;
}

.kotak3{
border-style: dashed;
width: 100px;
height: 100px;
background-color: #ddf;
border-width: 20px;
border-color: #444444;
float: left;
margin-right: 5px;
display: flex;
align-items: center;
justify-content: center;
}

.kotak4{
border-style: double;
width: 100px;
height: 100px;
background-color: #a7f;
border-width: 20px;
border-color: #444444;
float: left;
margin-right: 5px;
display: flex;
align-items: center;
justify-content: center;
}

.kotak5{
border-style: groove;
width: 100px;
height: 100px;
background-color: #ad7;
border-width: 20px;
border-color: #444444;
float: left;
margin-right: 5px;
display: flex;
align-items: center;
justify-content: center;
}

.kotak6{
border-style: inset;
width: 100px;
height: 100px;
background-color: #ad7;
border-width: 20px;
border-color: #444444;
float: left;
margin-right: 5px;
display: flex;
align-items: center;
justify-content: center;
}

.kotak7{
border-style: outset;
width: 100px;
height: 100px;
background-color: #ad7;
border-width: 20px;
border-color: #444444;
float: left;
margin-right: 5px;
display: flex;
align-items: center;
justify-content: center;
}

.kotak8{
border-style: ridge;
width: 100px;
height: 100px;
background-color: #ad7;
border-width: 20px;
border-color: #444444;
float: left;
margin-right: 5px;
display: flex;
align-items: center;
justify-content: center;
}

#tampilan

Tentunya kita harus menyesuaikan warna border dengan backgroundnya agar selaras. Pada tutorial selanjtunya nanti akan dibahas borber-radius yang merupakan penggembangan dari css2 yaitu css3. Border raduis membuat siku persegi tidak lagi tajam dan menjadi melengkung. Terima Kasih.

Popular posts from this blog

Cara Membuat Kalkulator Dengan Java Script

Cara membuat Link ke Halaman lain dan Link ke bagian Halaman

Aplikasi CRUD menggunakan Template Admin LTE