W3C

Bert Bos | CSS tutorial – borders

Borders

Borders

border-image-slice & border-image-repeat

From the demo:

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

Slices

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;
}