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

CSS Border Properties

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

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>


목록
이전글 다음글

댓글 작성

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

로그인하기

게시글 목록

번호 제목
3015
HTML SVG Star
3014
HTML SVG Rounded Rectangle
3013
HTML SVG Rectangle
3012
HTML SVG Circle
3011
HTML HTML5 Canvas Draw Image
3010
HTML HTML5 Canvas Draw Circular Gradient
3008
HTML HTML5 Canvas Draw Linear Gradient
3007
HTML HTML5 Canvas Stroke Text 1
3006
HTML HTML5 Canvas Draw a Text
3005
HTML HTML5 Canvas Draw a Circle
3004
HTML HTML5 Canvas Draw a Line
3003
HTML HTML5 Canvas
3002
HTML HTML5 <footer> 요소
3001
HTML HTML5 <header> 요소
3000
HTML html5 태그 정의
2999
HTML HTML5 <figure> 및 <figcaption> 요소
2998
HTML HTML5 <aside> 요소
2997
HTML HTML5 <nav> 요소
2996
HTML HTML5의 새로운 시맨틱 요소 article
2995
HTML HTML5의 새로운 시맨틱 요소 section
2994
HTML Syntax For HTML5Shiv(구문 HTML5Shiv의 경우)
2993
HTML The min and max Attributes(최소 및 최대 속성)
2992
HTML The list Attribute(list 속성)
2991
HTML The height and width Attributes(높이 및 너비 특성)
2989
HTML The formtarget Attribute(formtarget 속성)
2988
HTML The formnovalidate Attribute(formnovalidate 특성)
2987
HTML The formmethod Attribute(formmethod 속성)
2986
HTML The formenctype Attribute(formenctype 속성)
2985
HTML The step Attribute(step 속성)
2984
HTML The required Attribute(필수 속성)
이전 다음
전체 목록