<div class="renkli-animasyonlu-kenar-cizgisi">ft</div>

.renkli-animasyonlu-kenar-cizgisi {
  --angle: 0deg;
  width: 200px;
  height: 200px;
  border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;
  padding: 6px 12px;
  background-image: linear-gradient(var(--angle), oklab(0.21 0 0) 0%, green 50%, blue 100%);
  background-origin: border-box;
  box-shadow: inset 0 100vw #474747;
  color: #232323;
  border: 8px solid transparent;
  animation: 5s rotate linear infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 300%;
  letter-spacing: -0.02em;
  text-shadow: 0px 2px 3px #666;
}

@keyframes rotate {
  to {
    --angle: 360deg;
  }
}

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}



























body {
  font-family: Lato, sans-serif;
  background-color: oklab(0.28 0 0);
  line-height: 1.5;
  font-size: 44px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 40px;
  height: 100vh;
}