Cara Mudah Mengganti Warna Border Dengan CSS
Cara Mengganti Warna Border Dengan CSS - Border adalah warna garis yang mengelilingi sebuah text atau kotak, apa bila kita menggunakan HTML biasa kita akan membuatnya menggunakan Table border di sekitar text dan juga jika kita menggunakan HTML biasa kita hanya bisa memberikan satu wana saja pada border tersebut. tapi dengan CSS border properties dapat dibuat border dengan efek yang lebih baik.
Contoh :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
p.one
{
border-style: solid;
border-color: #8B008B
}
p.two
{
border-style: solid;
border-color: #8B008B #1E90FF
}
p.three
{
border-style: solid;
border-color: #8B008B #00ff00 #1E90FF
}
p.four
{
border-style: solid;
border-color: #8B008B #00ff00 #1E90FF rgb(250,0,255)
}
</style>
</head>
<body>
<p class="one">One-colored border!</p>
<p class="two">Two-colored border!</p>
<p class="three">Three-colored border!</p>
<p class="four">Four-colored border!</p>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
p.one
{
border-style: solid;
border-color: #8B008B
}
p.two
{
border-style: solid;
border-color: #8B008B #1E90FF
}
p.three
{
border-style: solid;
border-color: #8B008B #00ff00 #1E90FF
}
p.four
{
border-style: solid;
border-color: #8B008B #00ff00 #1E90FF rgb(250,0,255)
}
</style>
</head>
<body>
<p class="one">One-colored border!</p>
<p class="two">Two-colored border!</p>
<p class="three">Three-colored border!</p>
<p class="four">Four-colored border!</p>
</body>
</html>
Coba anda copy script di atas kesebuah file baru dengan nama index.html kemudan jalankan di browser anda, maka hasilnya akan seperti gambar berikut.
Warna Border Dengan CSS anda sekarang sudah selesai, baca juga tutorial CSS lainnya.
Post a Comment