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

CSS Border Properties

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

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>


목록
이전글 다음글

댓글 작성

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

로그인하기

게시글 목록

번호 제목
1921
HTML CSS Font-Size Comparative Table 4
1918
HTML IE 5,6,7,8 대응해주는 .js 2
1911
HTML 하단에 딱붙어있는 레이어는 어떻게 만들어야 할지? 6
1905
HTML (소스)마우스오버시 힌트창 css만으로 작동 6
1904
HTML 드림위버에서 특정 파일들의 코드 검색이 안됩니다.ㅜㅜ
1896
HTML 반응형 레이아웃 와이어프레임 7
1881
HTML 실전 HTML5 GUIDE PDF 14
1877
HTML 가변형 레이아웃 관련 3
1868
HTML 익스플로러에서만 깨지는 이유가 도무지... 8
1860
HTML 반응형 이미지 기법들 8
1856
HTML UI 관련 유용한 사이트 추천 3
1853
HTML 또 질문드립니다. 2
1850
HTML HTML5 CSS3 애니메이션 롤오버메뉴 2
1844
HTML HTML5를 지원하지 않는 웹브라우저에 비디오,오디오 재생해주는 html5media 5
1837
HTML css 표그리는법좀 문의 드립니다. 아무리 찾아도..ㅠㅜ 6
1829
HTML ie6 이게 더블 마진이면 해결을 어떻게 해야하나요? 7
1827
HTML 드림위버 롤오버요~ 1
1819
HTML 요걸우째설명해야될지;;; 7
1815
HTML li 가로정렬 3
1799
HTML 반응형 웹 디자인 (Responsive Web Design) 15
1797
HTML HTML5의 요소들에 대한 여러 웹브라우저의 지원여부를 확인할 수 있는 사이트 1
1791
HTML 님들은 html5공부 어떻게 하셨나요? 5
1777
HTML CSS를 이용한 DIV 레이아웃 문의드립니다. 13
1775
HTML HTML5 API Vocabulary 1
1765
HTML css 로 레이아웃 컨트롤 9
1759
HTML 백그라운드 이미지위에 swf파일이 안겹쳐져요. 5
1757
HTML HTML5 기능들을 테스트해볼수 있는 데모 사이트 1
1747
HTML 웹표준 권고사항에 CSS 작성시, 대소문자 구분도 있나요? 9
1746
HTML submit 버튼 안 보이게 하면 이상할까요? 2
1739
HTML 이미지에 들어가는 여백없애는 방법.. 이거 고민이네요;; 6
이전 다음
전체 목록