테스트 사이트 - 개발 중인 베타 버전입니다
SIR

CSS Border Properties

컴프
프로필 보기이 회원 글보기
 · 8년 전 · 2600

CSS Border Properties

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>


목록
이전글 다음글

댓글 작성

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

로그인하기

게시글 목록

번호 제목
2718
CSS 모바일웹 폰트사이즈? px? em?
2714
HTML html5 멋진 사이트 1곳 2
2713
CSS overflow 속성
2712
CSS border 속성에도 기본값이라는게 있습니다.
2711
CSS position:fixed 에 대한 것입니다. 1
2709
HTML DNS 미리 뚫고 페이지 속도 빠르게 하기 1
2708
CSS CSS : box-shadow, 박스 쉐도우(그림자) [펌]
2707
기타 목적에 따른 웹페이지 이동 설명
2706
HTML 디바이스별 해상도 확인 1
2695
기타 호환성모드 오류(?)처리 (X-UA-Compatible) 5
2692
기타 jQuery로 동작하는 페이지 로딩바 7
2688
기타 dpi 환산표(?)
2683
기타 px to em 또는 em to px
2679
CSS 서버에 등록되어 있는 폰트 사용하기 1
2678
CSS [1원짜리팁] div나 span 등 에서 수직 정렬 두번째이야기 5
2677
CSS [1원짜리팁] div 나 span 등에 tag에서 수직 정렬하기 2
2676
CSS 에디터(cheditor) 외부의 css 적용 1
2656
기타 에딧플러스에서 HOME 키 설정 2
2588
기타 X-UA-Compatible 서버에서 설정하기 4
2579
CSS LESS 사용 시 에디트플러스에서 CSS 설정 및 구문강조 사용하기 9
2578
반응형 N스크린 개발에 유용한 framework enquire.js 3
2550
반응형 반응형 웹 작업 시 mouseover click 분기 팁 20
2539
기타 모바일, 반응형 웹 작업시 필요할듯... 17
2532
CSS CSS 자료 링크 4
2511
반응형 브라우저 가로사이즈에 반응하여 css로 균등한 간격으로 정렬하기~_~ 10
2448
기타 파이어폭스로 작업하는 분들에게 팁! 6
2437
HTML 네이버 지도를 이용해 만든 레이아웃입니다. 19
2426
CSS IE7에서 float:right 버그에 관한 초간단 팁. 10
2417
웹접근성 웹 표준과 접근성, 그리고 크로스브라우징2 6
2416
웹접근성 웹 표준과 접근성, 그리고 크로스브라우징1 2
이전 다음
전체 목록