Iwan Setiawan

Web & graphic designer, illustrator

Love digital design, follow me @intraktives

Pada tutorial ini saya akan membahas fitur dari CSS3 yakni CSS3 border. Dengan tiga fitur dari CSS border ini kita bisa membuat rounded-corner, memberi efek bayangan (shadow effect) dan membuat border dari image. Sebelum ada fitur ini untuk membuat rounded-corner kita harus dibantu dengan image untuk membentuk rounded-corner. Begitu pula bila kita ingin membuat efek bayangan (shadow effect) kita haru menggunakan image, bisa dibayangkan betapa tidak efektifnya.

 

Adapun properties dari CSS3 border ini adalah :

  • border-radius
  • box-shadow
  • border-image

 

1. border-radius

Contoh :

Rounded-corner

Untuk mengatur seberapa bundarkah sudut dari suatu elemen, bisa diaplikasikan pada background atau border. Pada contoh di atas kita hanya mengatur parameter di border-radius.Pada contoh di atas parameternya 10px, semakin besar nilainya maka semakin bundar sudut tersebut.

HTML

<div class="round">Rounded-corner</div>

CSS

.round{
    border: 2px solid #a1a1a1;
    padding: 10px 40px; 
    background: #dddddd;
    width: 100px;
    border-radius: 10px;
}

 

2. box-shadow

Contoh :

Box Shadow

Untuk mengatur bayangan dari kotak di atas kita hanya mengatur parameter di box-shadow: 10px 9px 1px #ccc;. Parameter pertama (10px) mengatur shadow secara horizontal, semakin tinggi nilainya semakin ke kanan shadownya. Parameter kedua (9px) mengatur shadow secara vertikal,semakin tinggi nilainya semakin ke bawah shadownya. Parameter (1px) mengatur blur dari bayangan tersebut, semakin tinggi nilainya semakin blur bayangan tersebut.

HTML

<div class="shadow">Box-shadow</div>

CSS

.shadow{
    padding: 10px 40px; 
    background: red;
    width: 100px;
    box-shadow: 10px 9px 1px #ccc;
}

 

3. border-image

Dengan border-image kita bisa menjadikan image sebagai border. Cara kerja dari border-image dengan tetap mempertahankan empat sudut dari image sebagai empat sudut dari border namun bagian tengah dari image yang akan diulang (round dan repeat) atau diregang (stretch).

Perhatikan kode CSS border-image:url(border.png) 33% round; yang kita gunakan di contoh ini. Nilai 33% menunjukkan posisi slice dari image yang dijadikan border tersebut. Round menunjukkan bagaimana image tersebut ditampilkan apakah stretch, round atau repeat. Pada contoh ini kita menggunakan round. Jangan lupa menyertakan kode CSS untuk menentukan tebal border.Pada contoh ini kode CSSnya border: 33px solid transparent;.

Gambar berikut menunjukkan bagaimana image yang akan kita gunakan sebagai border dislice menjadi 9 bagian. Pada contoh yang kita berikan, nilai untuk slicenya 33%.

 

Berikut image yang akan kita jadikan border

 

Contoh :

Contoh image yang dijadikan border

 

HTML

<div class="bordering">The border-image property allows you to specify an image as a border</div>

 

CSS

.bordering{
   border: 33px solid transparent;
   border-image:url(border.png) 33% round;
   -webkit-border-image:url(border.png) 33% round;
   -moz-border-image:url(border.png) 33% round;
   padding: 20px;
   font-size: 20px; 
 }