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

CSS Border Properties

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

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>


목록
이전글 다음글

댓글 작성

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

로그인하기

게시글 목록

번호 제목
2861
신입 개발 ->디자인 ->퍼블로 왔습니다! 4
2849
jQuery Tree 를 만들었습니다.~~ 2
2828
퍼블리셔 수습기간인데 질문드립니다. 12
2824
기타 swip 사용 안하고, touchstart, touchmove 사용하여 슬라이드 구현 1
2820
기타 많이들 사용하시는 Slider 에 대해서... 3
2814
기타 텝메뉴 상단고정 및 해당위치 스크롤 5
2813
기타 유튜브 재생 중인 팝업 레이어 숨길 때 재생 멈추는 방법 2
2808
반응형 반응형 코딩할때 height:100% 에 관해서... 3
2807
기타 ie 와 크롬 폰트 부분해결할 수 있는건지좀 알려주시면 감사드립니다. 1
2802
CSS 당신은 모를 수도 있는 CSS의 7가지 단위 4
2795
HTML 모바일 작업시 숫자인식,메일주소, 지도상의 주소링크 막기
2787
기타 구글의 material design에 관한 설명입니다. 4
2783
CSS css가 충돌이 됬을때 4
2781
HTML HTML Canvas 2D Context
2776
HTML HTML5 자바스크립트 API 1
2771
기타 ShadowDOM Visualizer
2757
반응형 각 해상도별 테스트. 8
2756
HTML 결제모듈과 구글웹사이트 번역 엘리먼트
2755
HTML 팁] 모바일에서 문자보내기 2
2754
반응형 짧고 굵은거 1
2748
반응형 반응형 가변(가로, 세로) 아이프레임 제이쿼리 플러그인 13
2739
기타 계륵.. css3, jquery 를 이용한 랜덤 돌림판 포인트게임
2736
CSS 익스8이하에서 css3을 사용하기 3
2734
CSS 레이어팝업 가로 중앙 위치 시키기 3
2731
기타 ie8에 font awesome 적용 방법 6
2730
HTML 팁]모바일에서 전화 걸기 1
2729
기타 파비콘 넣는 방법이에요. 1
2726
CSS css !important 의 활용 3
2724
CSS sprite 이미지를 css코드로 변환해주는 웹도구 3
2722
기타 영역 스크롤 질문드립니다. 1
이전 다음
전체 목록