CSS-Tricks Example

Gradient Borders

border-image and linear-gradient Orig by Benjamin De Cock

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

The left edge is a little wonky here.

The right edge is a little wonky here.

Pseudo Element Edges Orig via Nicolas Gallagher

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Lots of control this way, can make elements anywhere like this corner technique.

Pseudo Element Block Knockout Orig by Chris Coyier

Centers aren't actually transparent, they match background color of area.

Bottom doesn't stretch below otherwise gradient under knockout might be visible. Bottom doesn't stretch below otherwise gradient under knockout might be visible. Bottom doesn't stretch below otherwise gradient under knockout might be visible. Bottom doesn't stretch below otherwise gradient under knockout might be visible.

Radial gradients can do uneven edges. No radial gradients in Opera as of 11.10

Multiple (Sized) Gradient Backgrounds Orig via Nicolas Gallagher

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.