border-style

CSS 공작소에 방문해 주셔서 감사드립니다. 반응형 예제로 느껴보세요!!

border-style 은 border 에서 테두리의 종류를 지정하는것에 특화된 속성입니다.

예제 1
border-style 개요
보기
border-style : solid
border-style : dotted
border-style : dashed
border-style : double
border-style : groove
border-style : ridge
border-style : inset
border-style : outset
소스
<style type="text/css">
    .css_test {
        text-align : center;
    }
    .css_test div {
        border : 5px solid gray;
        padding : 20px;
        margin-bottom : 10px;
    }
</style>

<div class="css_test">
    <div style="border-style:solid;">border-style : solid</div>
    <div style="border-style:dotted;">border-style : dotted</div>
    <div style="border-style:dashed;">border-style : dashed</div>
    <div style="border-style:double;">border-style : double</div>
    <div style="border-style:groove;">border-style : groove</div>
    <div style="border-style:ridge;">border-style : ridge</div>
    <div style="border-style:inset;">border-style : inset</div>
    <div style="border-style:outset;">border-style : outset</div>
</div>
사용된 CSS (클릭시 보기) : borderborder-stylemargin-bottompaddingtext-align
설명
- 아래 예제를 보시면 좀 더 이해하기 쉽습니다.
예제 2
실습 - 테두리 모양과 컬러 바꿔보기
보기
border-width :
3px
border-width : 3px
solid
dotted
dashed
double
groove
ridge
inset
outset
설명
예제 3
border-style 1개 속성 적용해 보기
보기
CSS 공작소
border-style :
border-style : solid
설명
- border-style : 이름 으로 사용합니다.
예제 4
border-style 2개 속성 적용해 보기
보기
CSS 공작소
border-style :
border-style : solid
설명

- border-style : 이름 이름 으로 사용합니다.
- 위 아래, 오른쪽 왼쪽 2개를 동시에 지정합니다.

예제 5
border-style 3개 속성 적용해 보기
보기
CSS 공작소
border-style :
border-style : solid
설명

- border-style : 이름 이름 이름 으로 사용합니다.
- , 오른쪽 왼쪽, 아래쪽 을 지정합니다.

예제 6
border-style 4개 속성 적용해 보기
보기
CSS 공작소
border-style :
border-style : solid
설명

- border-style : 이름 이름 이름 이름 으로 사용합니다.
- , 오른쪽, 아래쪽, 왼쪽 4군데를 각각 지정합니다.

연구 1
뜬금 예제 - 306 보충대대 표지판 흉내내기
보기
306보충대대
 
소스
<style type="text/css">
    .css_test {
        background : #006600;
        border : 15px ridge #ddd;
        color : white;
        font-size : 34pt !important;
        font-weight : bold;
        padding : 20px;
        text-align : center;
    }

    .css_test_ {
        border-left : 15px ridge #ddd;
        border-right : 15px ridge #ddd;
        height : 100px;
    }
</style>

<div class="css_test">306보충대대<br>→</div>
<div class="css_test_">&nbsp;</div>
설명
- 두개의 DIV 로 표지판과 기둥 모양을 만들어 보았습니다.

※ 추억의 306(삼공육) - 저도 306 ... ^^;
※ 306보충대는 2014년 12월 31일에 해체되었습니다.
+ 관련 CSS +