HTML태그 박스 테두리 꾸미기 border 사용법

안녕하세요
HTML 태그 공부 두번째 시간입니다~~^^

html 박스 구성 방식 중 오늘은 border 꾸미기에 대해 알아볼께요~~

‼️ 예시입니다 !!

<div style="padding: 20px 20px 35px; border: 10px solid rgb(151, 169, 214); border-image: none; width: 640px; color: rgb(51, 51, 51); letter-spacing: -1px; font-family: gilim; font-size: 15px; background-color: rgb(255, 255, 255);">


border: 3px solid rgb(151,169,214);
1) 3px 는 테두리선의 두께
=> 숫자가 커질수록 두꺼워지고,
테두리선을 안보이게 하고 싶으면 0으로 바꾸시면 됩니다

2) solid 는 테두리선의 종류
=> 테두리선의 종류는 아래 4가지가 있습니다
: 실선 solid
: 이중선 double
: 점선 dotted
: 절취선 dashed

3) rgb(151,169,214)
=> 테두리선의 색상
테두리간을 안보이게 하는 또다른 방법은 테두리선의
색상을 흰색(255,255,255)으로 바꾸시면 됩니다

border-radius: 20px;
=> 박스 모서리를 라운딩 처리할 때 사용합니다
숫자가 커질수록 라운딩 정도가 심해지는데요
숫자 순서는, (위,우,아래,좌) 입니다
숫자를 1개만 쓰면, 모든 모수리의 라운딩 정도가 동일하고,
아래위 같이 각각 지정할수도 있습니다
border-top-left-radius: 10px 30px;
border-top-right-radius: 10px 30px;
border-bottom-left-radius: 10px 30px;
border-bottom-right-radius: 10px 30px;
=> border-radius: 10px/ 30px;

border-image: none;
=> 박스 테두리선에 이미지를 삽입할 수 있는데,
두께와 색상 조정만으로 충분하므로 거의 사용할일은 없을 것 같습니다 ^^

background-color: rgb(255, 255, 255);
=> 박스의 바탕색을 지정할 수 있습니다

저도 배워가는중이라, 오늘은 여기까지 할께요~~ ^^/