Border-Radius-Previewer

border-radius-previewer.markdown

Border-Radius-Previewer

A Pen by Rishav on CodePen.

License.

index.html

<div class="container">
  <h1 class="title">Border-Radius-Previewer</h1>
  <div class="box"></div>
  <label for="top-left">top-left-radius</label>
  <input type="range" id="top-left" value = 0 max=200>
  
  <label for="top-right">top-right-radius</label>
  <input type="range" id="top-right" value = 0 max=200>
  
  <label for="bottom-left">bottom-left-radius</label>
  <input type="range" id="bottom-left" value = 0 max=200>
  
  <label for="bottom-right">bottom-right-radius</label>
  <input type="range" id="bottom-right" value = 0 max=200>
</div>

script.js

const inputs = [].slice.call(document.querySelectorAll("input"));
// js code from wes bos
inputs.forEach((input) => input.addEventListener("onchange", handleUpdate));
inputs.forEach((input) => input.addEventListener("mousemove", handleUpdate));

function handleUpdate(e) {
  const suffix = this.id === "base" ? "" : "px";
  document.documentElement.style.setProperty(
    `--${this.id}`,
    this.value + suffix
  );
}

style.css

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital@1&display=swap');
:root{
  --top-left: 0px;
  --top-right: 0px;
  --bottom-left: 0px;
  --bottom-right: 0px;
}
body{
  margin: 0;
}
*{
  box-sizing:border-box;
}
.container{
  height:100%;
  width: 100%;
  position: absolute;
  display: grid;
  padding: 4em;
  grid-template-columns: 1fr auto;
  font-family: 'Playfair Display', serif;
}

.box{
  height:20em;
  width:20em;
  background: cadetblue;
  border-top-left-radius: var(--top-left);
  border-top-right-radius: var(--top-right);
  border-bottom-left-radius: var(--bottom-left);
  border-bottom-right-radius: var(--bottom-right);
}