element-plus/docs/examples/border/radius.vue

<template>
  <el-row :gutter="12" class="demo-radius">
    <el-col
      v-for="(radius, i) in radiusGroup"
      :key="i"
      :span="6"
      :xs="{ span: 12 }"
    >
      <div class="title">{{ radius.name }}</div>
      <div class="value">
        <code>border-radius: {{ getValue(radius.type) || '0px' }}</code>
      </div>
      <div
        class="radius"
        :style="{
          borderRadius: radius.type
            ? `var(--el-border-radius-${radius.type})`
            : '',
        }"
      ></div>
    </el-col>
  </el-row>
</template>

<script lang="ts">
export default {
  data() {
    return {
      radiusGroup: [
        {
          name: 'No Radius',
          type: '',
        },
        {
          name: 'Small Radius',
          type: 'small',
        },
        {
          name: 'Large Radius',
          type: 'base',
        },
        {
          name: 'Round Radius',
          type: 'round',
        },
      ],
    }
  },
  methods: {
    getValue(type) {
      const getCssVarValue = (prefix, type) =>
        getComputedStyle(document.documentElement).getPropertyValue(
          `--el-${prefix}-${type}`
        )
      return getCssVarValue('border-radius', type)
    },
  },
}
</script>
<style scoped>
.demo-radius .title {
  color: var(--el-text-color-regular);
  font-size: 18px;
  margin: 10px 0;
}
.demo-radius .value {
  color: var(--el-text-color-primary);
  font-size: 16px;
  margin: 10px 0;
}
.demo-radius .radius {
  height: 40px;
  width: 70%;
  border: 1px solid var(--el-border-color-base);
  border-radius: 0;
  margin-top: 20px;
}
</style>