border-bottom-style

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

border-bottom-style 은 아래쪽 테두리의 종류를 지정합니다.

예제 1
border-bottom-style 개요 - 테두리의 아래쪽만 설정합니다
보기
border-bottom-style : solid
border-bottom-style : dotted
border-bottom-style : dashed
border-bottom-style : double
border-bottom-style : groove
border-bottom-style : ridge
border-bottom-style : inset
border-bottom-style : outset
소스
<style type="text/css">
    .css_test {
        text-align : center;
    }
    .css_test div {
        border : 6px solid gray;
        display : inline-block;
        height : 150px;
        line-height : 150px !important;
        margin : 5px;
        width : 200px;
    }
</style>

<div class="css_test">
    <div style="CSS_NAME:solid;">CSS_NAME : solid</div>
    <div style="CSS_NAME:dotted;">CSS_NAME : dotted</div>
    <div style="CSS_NAME:dashed;">CSS_NAME : dashed</div>
    <div style="CSS_NAME:double;">CSS_NAME : double</div>
    <div style="CSS_NAME:groove;">CSS_NAME : groove</div>
    <div style="CSS_NAME:ridge;">CSS_NAME : ridge</div>
    <div style="CSS_NAME:inset;">CSS_NAME : inset</div>
    <div style="CSS_NAME:outset;">CSS_NAME : outset</div>
</div>
설명
- 참고 : border-style
연구 1
border-bottom-style 조절해 보기
보기
border-width :
3px
border-width : 3px
solid
dotted
dashed
double
groove
ridge
inset
outset
+ 관련 CSS +