CSS Border Properties

컴프

프로필 보기 이 회원 글보기 이 회원의 댓글보기

· 8년 전 · 조회 2622 2622

CSS 테두리 속성을 사용하면 요소 테두리의 스타일, 너비 및 색상을 지정할 수 있습니다.

Border Style

border-style 속성은 어떤 종류의 테두리를 표시할지 지정합니다.

허용되는 값은 다음과 같습니다.

dotted - 점선 테두리를 정의합니다.

dashed - 점선 테두리를 정의합니다.

solid - 단색 테두리를 정의합니다.

double - 이중 경계를 정의합니다.

groove - 3D 그루브 경계를 정의합니다. 효과는 테두리 색 값에 따라 다릅니다.

ridge - 3D 융기 테두리를 정의합니다. 효과는 테두리 색 값에 따라 다릅니다.

inset - 3D 삽입 테두리를 정의합니다. 효과는 테두리 색 값에 따라 다릅니다.

outset - 3D 시작 테두리를 정의합니다. 효과는 테두리 색 값에 따라 다릅니다.

none - 테두리 없음 정의

hidden - 숨겨진 테두리를 정의합니다.

Example

p.dotted {border-style: dotted;}

p.dashed {border-style: dashed;}

p.solid {border-style: solid;}

p.double {border-style: double;}

p.groove {border-style: groove;}

p.ridge {border-style: ridge;}

p.inset {border-style: inset;}

p.outset {border-style: outset;}

p.none {border-style: none;}

p.hidden {border-style: hidden;}

p.mix {border-style: dotted dashed solid double;}

<!DOCTYPE html>

<html>

<head>

<style>

p.dotted {border-style: dotted;}

p.dashed {border-style: dashed;}

p.solid {border-style: solid;}

p.double {border-style: double;}

p.groove {border-style: groove;}

p.ridge {border-style: ridge;}

p.inset {border-style: inset;}

p.outset {border-style: outset;}

p.none {border-style: none;}

p.hidden {border-style: hidden;}

p.mix {border-style: dotted dashed solid double;}

</style>

</head>

<body>

<h2>The border-style Property</h2>

<p>This property specifies what kind of border to display:</p>

<p class="dotted">A dotted border.</p>

<p class="dashed">A dashed border.</p>

<p class="solid">A solid border.</p>

<p class="double">A double border.</p>

<p class="groove">A groove border.</p>

<p class="ridge">A ridge border.</p>

<p class="inset">An inset border.</p>

<p class="outset">An outset border.</p>

<p class="none">No border.</p>

<p class="hidden">A hidden border.</p>

<p class="mix">A mixed border.</p>

</body>

</html>

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시판 목록

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

글쓰기

번호	분류	제목	글쓴이	날짜	조회
527	HTML	[css] 속기 font 속성 사용시 주의	aequum 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3232
526	HTML	공백 문자의 병합	aequum 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	2314
525	HTML	제대로 단위 사용하자	aequum 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	2617
524	HTML	혹시.. color=grey 라고 아세요? [5]	b1ack 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	2212
523	HTML	거참 이거 질답에올려야하나여기올려야하나;; [5]	우리까미 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	2799
522	HTML	이미지를 돌려요 ~ [1]	낄낄닷컴 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	2598
521	HTML	css3 메뉴	mydie 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	2623
520	HTML	스타일시트 선언에서 media="screen" 와 media="print"의 차이점	port 프로필 보기 이 회원 글보기 이 회원의 댓글보기	14년 전	4770
519	HTML	가변 위치에 배너 붙이기 [1]	관리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	14년 전	3823
518	HTML	[css질문]<input type=text>에 한글을쓰면 textbox가 움직이는데... [3]	b1ack 프로필 보기 이 회원 글보기 이 회원의 댓글보기	14년 전	6453
517	기타	알아두면 손 발이 편한 du 명령어 [3]	Kanzi 프로필 보기 이 회원 글보기 이 회원의 댓글보기	14년 전	3679
516	HTML	[vim] 주석 달기~ [1]	Kanzi 프로필 보기 이 회원 글보기 이 회원의 댓글보기	14년 전	3015
515	기타	div 레이아웃 잡기! [17]	코코남편 프로필 보기 이 회원 글보기 이 회원의 댓글보기	14년 전	4319
514	HTML	브라우저별 개발모드 [3]	K찰스 프로필 보기 이 회원 글보기 이 회원의 댓글보기	14년 전	2982
513	JavaScript	Http Live Stream 에 관하여	visualp 프로필 보기 이 회원 글보기 이 회원의 댓글보기	14년 전	2584
512	JavaScript	img 자체에서 이미지 없을때 안보이게 하기 [12]	포그난 프로필 보기 이 회원 글보기 이 회원의 댓글보기	14년 전	20160
511	기타	이미지맵 만들어주는 프로그램 [4]	켈리얀 프로필 보기 이 회원 글보기 이 회원의 댓글보기	14년 전	5323
510	HTML	유용한 함수 get_included_files [7]	유창화 프로필 보기 이 회원 글보기 이 회원의 댓글보기	14년 전	2740
509	HTML	메타데이타를 제거하여 이미지 최적화하기 [5]	port 프로필 보기 이 회원 글보기 이 회원의 댓글보기	14년 전	3917
508	HTML	Loading Panel Widget	techer 프로필 보기 이 회원 글보기 이 회원의 댓글보기	14년 전	2847
507	HTML	도와 주세요 [1]	호반의빛 프로필 보기 이 회원 글보기 이 회원의 댓글보기	14년 전	2072
506	HTML	DOM Method & Property	관리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	14년 전	1988
505	HTML	[유용한팁][날짜]지정 년월의 마지막 일 구하기 [1]	좋은천사7 프로필 보기 이 회원 글보기 이 회원의 댓글보기	14년 전	2583
504	HTML	[유용한팁][날짜]오늘의 년월일 가져가기	좋은천사7 프로필 보기 이 회원 글보기 이 회원의 댓글보기	14년 전	2233
503	HTML	[유용한팁][날짜]요일 구하기[월화수목금토일]	좋은천사7 프로필 보기 이 회원 글보기 이 회원의 댓글보기	14년 전	4481
502	HTML	[유용한 팁][이벤트]사파리의 onload event	좋은천사7 프로필 보기 이 회원 글보기 이 회원의 댓글보기	14년 전	2805
501	HTML	지역 3단계로 되는 동적셀렉트좀 봐주세요...ㅠㅠㅠㅠ [1]	김준수사랑 프로필 보기 이 회원 글보기 이 회원의 댓글보기	14년 전	2723
500	HTML	툴바 프로그램개발할때.... [1]	레인보우1492 프로필 보기 이 회원 글보기 이 회원의 댓글보기	14년 전	2202
499	HTML	코드 잘 모르는 이가 질문 [4]	네비플러스 프로필 보기 이 회원 글보기 이 회원의 댓글보기	14년 전	2449
498	HTML	회원이 물품구매시 관리자페이지에 있는 관리자가 리플레쉬 안하고 바로 아는방법?? [1]	8제임스8 프로필 보기 이 회원 글보기 이 회원의 댓글보기	14년 전	2346