Border Radius in CSS
One of the simples project I’ve found on the internet is change some characteristics of attributes in CSS using a kind of input in a web page. It’s a simple project, but always fun. This kind of useless project, because is not a “production ready” thing teach me some things that are not strictly related with my work every day but it’s useful and enjoyable.
The code is here: border-radius and also you can see the demo by yourself here Border Radius demo
What is a border-radius property
As it’s name said is a property that rounds the corners of an element’s. The property is applied to the whole background, even if the element has no border.
The property is shorthand for the following CSS properties:
The initial value for the properties is 0
More information, and part of the information I’ve found is from : mdm web docs: border-radius
Load the value
At first you can change the value in a slide. This function load the number in the front of the page:
const box = document.querySelector('.box');
const range = document.querySelector('#border-radius');
const valueDisplay = document.querySelector('.value-display');
range.addEventListener('input', ({ target: { value } }) => {
box.style.setProperty('--border-radius', value + 'px');
valueDisplay.textContent = value + 'px';
});