border-image-slice & border-image-repeat

From the demo:

.border_groovy {
  border-image: url(groovy.png);
  border-image-slice:124;
  border-image-repeat: round;
  border:solid 124px beige }

Still need to specify 'border'

1. to set the size of the border area, and
2. to provide a fallback if image unavailable

2013: Firefox: yes; Safari & Chrome: yes; Opera: with prefix; IE: no

Gradients as borders

From the demo:

span {
  border-image: linear-gradient(blue, green)
    33% round stretch;
}

Rounded corners

From the demo:

div:nth-child(6) {
  border-radius: 160px 0 60px 0 / 160px 0 30px 0;
}
/* 4 horizontal radii / 4 vertical radii */

Box shadow

From the demo:

div:nth-child(2) div{
  box-shadow:rgba(102,90,74, .7) 3px 3px inset;
}