JSFiddle - React, Tailwind, and code Playground

stacked border-radius test

by Travis Almand

HTML

<label>radius: <input class="radius" type="range" min="0" max="50" step="1" value="0" /></label>

<br /><br />

<label class="switch">
  <input type="checkbox" />
  <span class="knob"></span>
</label>

CSS

:root {
  --border-radius: 0;
}

.switch {
  background-color: gray;
  border-radius: var(--border-radius);
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  height: 48px;
  position: relative;
  width: 100px;
}
.switch input {
  position: absolute;
  visibility: hidden;
}
.switch:hover .knob::before {
  background-color: gainsboro;
}
.switch input:checked + .knob {
  left: calc(100% - 48px);
}
.switch input:checked + .knob::after {
  background-color: green;
}

.knob {
  left: 0;
  position: absolute;
  top: 0;
  transition: left 250ms;
}
.knob::before {
  border-radius: var(--border-radius);
  content: '';
  height: 48px;
  left: 0;
  position: absolute;
  top: 0;
  width: 48px;
}
.knob::after {
  background-color: red;
  border-radius: var(--border-radius);
  content: '';
  height: 32px;
  left: 8px;
  position: absolute;
  top: 8px;
  transition: background-color 250ms;
  width: 32px;
}

JavaScript

const radius = document.querySelector('.radius');
const switchElement = document.querySelector('.switch');

radius.addEventListener('input', function (e) {
	const radiusAmount = e.target.value;
  
  switchElement.style.cssText = `--border-radius: ${radiusAmount}px`;
});