Eksplorasi Property Border di CSS

Halo semua, kali ini kita akan mengeksplorasi sedikit mengenai css border, ada apa saja? ayo kita bahas...

1. border, ini adalah property utama pada sebuah border dengan isinya yaitu : 

border: border-width border-style border-color|initial|inherit;

contoh :

border: 10px solid #0066ff;

 

 

 

atau

border: 20px dotted #2d89ef;
 
 

2. border-width, fungsinya untuk mengatur ketebalan dari sebuah border

border-width: medium|thin|thick|length|initial|inherit;

contoh :

border-width:50px;
 

atau

border-width:50px 10px 20px 30px;
 

dengan ketentuan :

  • border-width: atas kanan bawah kiri ;
  • border-width: atas kanankiri bawah;
  • border-width: atasbawah kanankiri;
  • border-width: atasbawahkanankiri;

3. border-color, fungsinya untuk mengatur warna border tersebut dengan format :

border-color: color|transparent|initial|inherit;

contoh :

border-color: orange;
 

atau

border-color: orange blue green red;
 

dengan ketentuan :

  • border-color: atas kanan bawah kiri;
  • border-color: atas kanankiri bawah;
  • border-color: atasbawah kanankiri;
  • border-color: atasbawahkanankiri;

4. border-style, yaitu untuk mengatur tipe dari border, dengan format :

border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

contoh :

border-style: dotted dashed double ridge;
 

dengan ketentuan :

  • border-style: atas kanan bawah kiri;
  • border-style: atas kanankiri bawah;
  • border-style: atasbawah kanankiri;
  • border-style: atasbawahkanankiri;

5. border radius, fungsinya untuk melenturkan setiap sudutnya dengan format :

border-radius: 1-4 length|% / 1-4 length|%|initial|inherit;

contoh :

border-radius: 50px
 

Tak cuma sampai disini, masih banyak property border yang dapat kita gunakan, silahkan di eksplorasi lagi okee.... laugh




Thursday, 17 Sep 2015 12:30 PM Arief Setya
Sign In
Sign In to Your Account :)
Sign In or Sign Up
 
Follow Us on Twitter
Find Us on Facebook