Simple split color

Simple split color

See the Pen Simple Split Color Element by Katy DeCorah (@katydecorah) on CodePen

The effect is achieved on a single element using the properties border and box-sizing.

The border, only manipulating one side, must be half of the element’s width for a vertical split. For a horizontal split the border must be half of the element’s height.

In the example, the circle is 20em wide and has a border left width of 10em. I set the border color to white with a really low alpha (rgba) so that the border would pick up the color of the background, but add a light white on top.

Universally, I set the box-sizing to border box. If I didn’t set the box-sizing, then my shape would be warped with dimensions of 30em width and 20em height. Setting the box-sizing to border box allows the border to be included in the width/height of the element.


Did you enjoy this post? Support SisterSong. SisterSong strengthens and amplifies the collective voices of indigenous women and women of color to achieve reproductive justice by eradicating reproductive oppression and securing human rights.