Med pregledovanjem spleta sem naletel na zanimiv primer, gumb, ki je imel prekinjeno obrobo. Rezultat je bil enak gumbu na sliki, avtor pa je to rešil s pomočjo JavaScripta in CSSja. Izbrana rešitev mi ni bila najbolj všeč, zato sem se lotil rešitve, ki uporabi samo CSS.

Za rešitev tega problema sem uporabil CSS selector ::before in ::after s katerima sem ustvaril prekinitev in jo ustrezno pozicioniral. Gumb je imel definirano višino in širino na podlagi katere sem na novo ustvarjene elemente s CSS značko position:absolute in koordinatami ustrezno postavil na svoje mesto.

Gumb s prekinjeno obrobo – Broken border buttom

Rešitev deluje v vseh brskalnikih, tudi Internet Explorer.