Menciptakan Efek Bevel dengan Modal Border dan Outline

Pembuatan efek bevel dengan border dan outline ini jauh lebih ringan dibandingkan dengan pembuatan efek bevel dengan border dan CSS bayangan, karena di sini kita hanya perlu untuk menuliskan properti background-color, border-top dan outline saja untuk menciptakan efeknya:

#C5F0F9

#0BC7BB

#04948A

Hasil Tampilan

#box {
  background-color:#0BC7BB;     /* Level 2 */
  border-top:1px solid #C5F0F9; /* Level 1 */
  outline:1px solid #04948A;    /* Level 3 */
}

Lebih Banyak Efek

Selain untuk menciptakan efek bevel, teknik ini juga bisa digunakan untuk menciptakan efek-efek ganteng lainnya seperti ini:

Efek Benang Jahit

#F49F2D

#FFFFFF

#box {
  background-color:#F49F2D;  /* Level 2 */
  border:1px dashed #FFFFFF; /* Level 1 */
  outline:4px solid #F49F2D; /* Level 2 */
}

Efek Garis Tepi Berganda

#6DC2F7

#2C97DA

#box {
  background-color:#2C97DA;  /* Level 2 */
  border:4px solid #6DC2F7;  /* Level 1 */
  outline:4px solid #2C97DA; /* Level 2 */
}