CSS input 테두리의 모서리를 둥글게 하는 방법

질문 : 개요 반경?

---

어쨌든 border-radius 와 비슷한 div element 의 윤곽선 에 둥근 모서리 가 생깁니 까?

답변

---

지금은 오래된 질문이지만 비슷한 문제를 가진 사람과 관련이있을 수 있습니다. border 가있는 입력 필드가 있었고 초점 윤곽선의 색상을 변경하고 싶었습니다. 입력 컨트롤에 outline 을 길들일 수 없었습니다.

그래서 대신 box-shadow를 사용했습니다. 나는 실제로 그림자의 부드러운 모양을 선호했지만 둥근 윤곽선을 시뮬레이션하기 위해 그림자를 강화할 수 있습니다.

input, input:focus {
    border: none;
    border-radius: 2pt;
    box-shadow: 0 0 0 1pt grey;
    outline: none;
    transition: .1s;
}
/* Smooth outline with box-shadow: */
.text1:focus {
    box-shadow: 0 0 3pt 2pt cornflowerblue;
}

/* Hard "outline" with box-shadow: */
.text2:focus {
    box-shadow: 0 0 0 2pt red;
}

<input class="text1"> 
<br>
<br>
<input type=text class="text2">

출처 : https://stackoverflow.com/questions/5394116/outline-radius