버튼에 색상 테두리를 추가하려면 CSS의 border 속성을 사용하면 됩니다. border 속성은 테두리의 두께, 스타일(solid, dashed, dotted 등), 색상을 한 번에 지정할 수 있어 간편합니다.
기본 문법
border 속성은 다음과 같은 형식으로 작성합니다.
border: 두께 스타일 색상;
예를 들어 border: 3px dashed blue;는 3픽셀 두께의 파란색 점선 테두리를 의미합니다.
예제
아래 코드는 노란색 배경의 버튼에 파란색 점선 테두리를 적용한 예시입니다.
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: yellow;
color: black;
text-align: center;
font-size: 15px;
padding: 20px;
border-radius: 15px;
border: 3px dashed blue;
}
</style>
</head>
<body>
<h2>결과</h2>
<p>아래 버튼을 클릭해 결과를 확인해 보세요:</p>
<button class = "button">Result</button>
</body>
</html>주요 포인트
- border-width: 테두리의 두께를 지정합니다 (예: 3px).
- border-style: solid(실선), dashed(점선), dotted(도트) 등 다양한 스타일을 선택할 수 있습니다.
- border-color: 테두리 색상을 지정합니다.
- border-radius: 테두리와 함께 사용하면 둥근 모서리의 버튼을 만들 수 있습니다.
이처럼 border 속성 하나만으로도 버튼의 디자인을 손쉽게 꾸밀 수 있습니다.