인프런 커뮤니티 질문&답변

안녕하세요 🙂

1. 개발자도구에서 디버깅을 해보시면 실제 border-radius 를 담당하고 있는 요소는 파랑색 네모 박스로 체크한 요소인걸 확인할 수 있습니다. (스크린샷 참고)

2. 하지만 수강생 분이 스타일을 위해 class를 적용한건 노랑색 박스이지요?

3. 만약 변경하시려면 파랑색 박스로 감싼 요소를 변경해야 합니다.

<template>
<q-page>
    <q-input
    v-model="model"
    label="Your Label"
    outlined
    class="rounded-input"
    />
</q-page>
</template>
<script setup>
import { ref } from 'vue';
const model = ref('');

</script>
<style>
.rounded-input.q-field--outlined .q-field__control {
    border-radius: 30px; 
}
</style>