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

CSS Border Properties

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

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>


목록
이전글 다음글

댓글 작성

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

로그인하기

게시글 목록

번호 제목
3087
CSS Striped Tables(스트라이프 테이블)
3086
CSS 테이블 Hoverable Table
3085
CSS 테이블 수평 분배기
3084
CSS 테이블 패딩
3083
CSS 테치블 수직 정렬
3082
CSS 테이블 수평 정렬
3081
CSS 표 너비와 높이
3080
CSS 표 축소 창
3079
CSS 표 테두리
3078
CSS 스타일리스트 색상
3077
CSS 목록 - 속기 속성
3076
CSS List Item 마커 위치 지정
3075
CSS 목록 항목 마커로 이미지 만들기
3074
CSS HTML 목록 및 CSS 목록 속성
3073
CSS css Advanced - Link Buttons 고급 - 링크 버튼
3072
CSS CSS Links 배경색
3071
CSS CSS Links Text Decoration
3070
CSS CSS Links 스타일 링크
3069
CSS scale () 메서드
3068
CSS rotate () 메서드
3067
CSS CSS3 2D Transforms
3065
CSS 부트 스트랩 아이콘
3064
CSS font variant 글꼴 변형
3063
CSS Font Weight 1
3062
CSS 백분율과 em의 조합 사용 1
3061
CSS Em로 글꼴 크기 설정 Set Font Size With Em
3060
CSS Font Size 글자 크기
3059
CSS Font Style 글꼴 스타일
3058
CSS Font Family 글꼴 모음
3057
CSS Text Shadow 문자 그림자
이전 다음
전체 목록