<template>
  <div class='BorderRadiusImage' :style="{ borderRadius, '--border-width': borderWidth, '--border-color': borderColor }">
    <slot />
  </div>
</template>

<script>
export default {
  name: 'BorderRadiusImage',
  props: {
    borderRadius: {
      type: String,
      default: "0px"
    },
    borderWidth: {
      type: String,
      default: "2px"
    },
    borderColor: {
      type: String,
      default: "rgba(0,0,0,0)"
    },
  }
}
</script>

<style lang='scss' scoped>
.BorderRadiusImage {
  position: relative;
  background-clip: padding-box !important;
  margin: calc(var(--border-width) / 2);
  overflow: visible !important;
  ;

  &::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: calc(var(--border-width) / -2);
    left: calc(var(--border-width) / -2);
    width: calc(100% + var(--border-width));
    height: calc(100% + var(--border-width));
    border-radius: inherit;
    // background: var(--border-color);
    background: linear-gradient(360deg, rgba(55, 231, 255, .3), rgba(55, 231, 255, 0));
  }
}
</style>
