border : 테두리
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
p{
border-style: solid;
border-color: aqua;
border-width: 3px;
}
</style>
</head>
<body>
<p>border Test</p>
</body>
</html>
이렇게 테두리의 속성을 하나씩 지정 가능하다.
border-style : 테두리 스타일
border-color : 테두리 색상
border-width : 테두리 굵기
한 줄로 작성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
#p1 {
border: 3px dotted red;
}
#p2 {
border: 3px dashed orange;
}
#p3 {
border-top: 2px groove black;
border-bottom: 10px dashed #494949;
border-left: 3px dotted orchid;
border-right: 3px double rosybrown;
}
</style>
</head>
<body>
<p id="p1">border Test1</p>
<p id="p2">border Test2</p>
<p id="p3">border Test3</p>
</body>
</html>
이렇게 굵기, 스타일, 색 순서로 한 줄로 작성할 수 있다.
또한 #p3처럼 각각의 설정을 줄 수도 있다.
참고
<input>태그와 같이 기본적으로 테두리가 설정된 요소에 테두리를 없애고 싶으면
- border: none;
- border: 0;
이렇게 border 속성을 지정하면 된다.
부족하거나 잘못된 내용이 있을 경우 댓글 달아주시면 감사하겠습니다.
이 글에 부족한 부분이 존재할 경우 추후에 수정될 수 있습니다.
'CS > HTML CSS' 카테고리의 다른 글
| 7. border-radius, background-color, box-shadow (0) | 2022.05.07 |
|---|---|
| 6. width, height, overflow (0) | 2022.05.07 |
| 4. Margin, Padding (0) | 2022.05.07 |
| 3. Box Model 기초 (0) | 2022.05.07 |
| 2. 클래스, 아이디, 주석 (0) | 2022.05.06 |