CSS box z ozdobną krawędzią

Ramka wykonana w całości przy użyciu CSS, bez zbędnej grafiki.
Źródło: http://cssdeck.com/labs/fence-edge

HTML

div jakiś_napis

CSS

$size: 10px $size-double: $size*2 html height: 100% body height: 100% margin: 0 text-align: center &:after content: "" display: inline-block vertical-align: middle height: 100% width: 0 div display: inline-block vertical-align: middle line-height: 120px width: 75% padding: $size $size font-size: 28px font-family: Arial, sans-serif color: #fff text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7) border: $size solid transparent border-width: $size 0 background-color: lightblue background-color: hsla(0, 0%, 0%, 0) $half: 50.5% $color-top: transparent $half, lightblue $half $color-bottom: transparent $half, skyblue $half $top-left: linear-gradient(top left, $color-top) $top-right: linear-gradient(top right, $color-top) $bottom-left: linear-gradient(bottom left, $color-bottom) $bottom-right: linear-gradient(bottom right, $color-bottom) @include background-image(linear-gradient(lightblue, skyblue), $top-left, $top-right, $bottom-left, $bottom-right) background-repeat: repeat, repeat-x, repeat-x, repeat-x, repeat-x background-position: 0 0, $size 0, $size 0, $size 100%, $size 100% background-size: auto auto, $size-double $size-double, $size-double $size-double, $size-double $size-double, $size-double $size-double background-clip: padding-box, border-box, border-box, border-box, border-box background-origin: padding-box, border-box, border-box, border-box, border-box