CSS Border Radius जनरेटर - विज़ुअली गोल कोने बनाएं ऑनलाइन

// CSS Border Radius Generator

function optimizeShorthand(values, unit) {
  const [a, b, c, d] = values;
  if (a === b && b === c && c === d) return `${a}${unit}`;
  if (a === c && b === d) return `${a}${unit} ${b}${unit}`;
  if (b === d) return `${a}${unit} ${b}${unit} ${c}${unit}`;
  return `${a}${unit} ${b}${unit} ${c}${unit} ${d}${unit}`;
}

function generateBorderRadius(tl, tr, br, bl, unit = 'px') {
  return `border-radius: ${optimizeShorthand([tl, tr, br, bl], unit)};`;
}

function generateElliptical(h, v, unit = '%') {
  const hPart = optimizeShorthand(h, unit);
  const vPart = optimizeShorthand(v, unit);
  if (hPart === vPart) return `border-radius: ${hPart};`;
  return `border-radius: ${hPart} / ${vPart};`;
}

console.log(generateBorderRadius(10, 20, 10, 20, 'px'));
// border-radius: 10px 20px;

console.log(generateBorderRadius(8, 8, 8, 8, 'px'));
// border-radius: 8px;

console.log(generateElliptical([30, 70, 70, 30], [70, 30, 30, 70], '%'));
// border-radius: 30% 70% / 70% 30%;