8-bit borders using multiple CSS3 shadows and a little of Sass.

Trying to achieve an inset border effect around a block of text.

This example shows how CSS gradients can be applied to a rounded border.

This example shows how the CSS clip-path property can be used to create a variety of shaped gradient borders.

Using 8 border-radius values can be pretty dope. This example shows how using it on the element and its ::before pseudo element can create a sketchy look and feel.

Card with animated left border on hover.

HTML and CSS gradient border without pseudo elements.

Button with an interactive border gradient.

Try to have a dynamic and responsive table that has borders only between cells.

Search input animation (pure css, without svg). Added variables for width, height and border-width, so now you can easily change overall dimensions of this search input. This demo have only one problem - no input autofocus after opening click.

When you hove the image, the border bounces.

A recreation of the Western Electric Big Button phone produced in the 1970s. Recreated using flexbox, grid, text shadows, and text strokes. This pen encountered several CSS quirks. First, is that setting a border-radius and overflow: hidden breaks anti-aliasing on the border-radius, leaving a jagged appearance. This was worked around a bit by adding a very soft light box-shadow on the side that has the border-radius. This alleviates the problem somewhat. Second, text-stroke is still crudely implemented in browsers. All text strokes are drawn on the outside of the glyph which changes the shape of the glyph. Additionally, text shadows are sized using the inside of the glyph and end up smaller. To work around this, I oversized the text-stroke and then tried to position each glyph so that the stroke slightly overflowed the container and was cut off. This gives a smoother appearance, but is imprecise and cuts a few of the characters off.

WebandCrafts logo designed with border-radius, box-shadow and CSS transforms. Click the logo for exploded view.

A CSS extension for Bootstrap that adds equal height borders to Bootstrap columns.