border 속성 - govl2233/project_studyej GitHub Wiki

  • border:(전체)

두께값/색상값/속성값; ------------테두리 스타일 묶어서 지정. ex) border-right:3px solid blue; / border:1px red solid;

  • border-top:속성값;

  • border-left:속성값;

  • border-right:속성값;

  • border-bottom:속성값;

  • border-width:속성값; -----테두리 두께는 일반적으로 일정하게 하기때문에 width속성을 사용하여 한꺼번에 지정

  • border-style:속성값; ----- dotted(점선),dashed(짧은선),solid(실선),double(이중선)..등등

ex) border-style: solid dotted dashed double;

  • border-color:속성값; ------(border-color:red;)

  • border-radius:속성값; -----라운드 해주는 역할(규칙-> 시계방향 10px,20px 넣으면 x표시 모양으로 넣어짐

ex) border-radius:50px/20px; ----------> (css3에만 적용되고 그외 border속성들은 css2에만 적용됨)


<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        div.box{
            width: 100px;height: 100px;
            border-width:1px 2px 3px 4px;
            border-color:red green blue orange;
            border-style: solid dotted dashed double;
            border-radius: 10px 20px 30px
        }
    </style>
</head>
⚠️ **GitHub.com Fallback** ⚠️