소스 보기
Javascript
HTML
CSS 
 // 선택자
    const searchBox = document.querySelector(".search__box input"); //검색  박스
    const searchList = document.querySelectorAll(".search__list ul li"); //목록 리스트
    const searchInfo = document.querySelector(".num") //전체 갯수
    const searchType = document.querySelector(".type");//검색 유형 
    

    //검색 유형 
    let str = '플렉스, 애니메이션, 백그라운드, 기타, border';
    let pos1 = str.indexOf('플렉스')
    
    // 전체 갯수 구하기
    searchInfo.textContent = searchList.length;

    searchList.forEach(el => {
        el.classList.add("show");
    });
            
    // 검색 영역
    searchBox.addEventListener("keyup", ()=>{
        const searchWord = searchBox.value; //사용자가 입력한 키워드

        searchList.forEach(el => {
            const cssType = el.dataset.type; //css 속성 모든 값
            const cssName = el.querySelector("strong")
            //console.log(cssName)

            if(cssName.includes(searchWord)){
                el.classList.add("hide");
            }else{
                el.classList.remove("hide");
            }
        });
    });

<div class="search__wrap">
    <span>inclides()를 이용하여 CSS 속성 검색하기</span>
    <h1>CSS 태그 검색하기</h1>
    
    <div class="search__box">
        <label for="search">검색하기</label>
        <input type="text" id="search" placeholder="CSS 속성 및 유형을 입력해 주세요.">
    </div>
    <div class="search__info">
        <div class="type">플렉스, 애니메이션, 백그라운드, 기타 등등 유형 별로 검색해보세요.</div>
        <div>전체 속성 갯수 : <span class="num"></span></div>
    </div>
    <div class="search__list">
        <div class="css">
            <ul>
                <li data-name="aLign-content" data-type="플렉스"><strong>aLign-content</strong> : 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다.</li>
                <li data-name="aLign-items" data-type="플렉스"><strong>aLign-items</strong> : 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다.</li>
                <li data-name="aLign-self" data-type="플렉스"><strong>aLign-self</strong> : 개별적인 콘텐츠 아이템의 정렬 상태를 설정합니다. </li>
                <li data-name="all" data-type="기타"><strong>all</strong> : 요소의 속성을 초기화 또는 상속을 설정합니다.</li>
                <li data-name="animation" data-type="애니메이션"><strong>animation</strong> : 애니메이션과 관련된 속성을 일괄적으로 설정합니다.</li>
                <li data-name="animation-delay" data-type="애니메이션"><strong>animation-delay</strong> : 애니메이션 지연 시간을 설정합니다. </li>
                <li data-name="animation-direction" data-type="애니메이션"><strong>animation-direction</strong> : 속성은 애니메이션 움직임 방향 설정한다. </li>
                <li data-name="animation-duration" data-type="애니메이션"><strong>animation-duration</strong> : 속성은 애니메이션 움직임 시간을 설정한다.</li>
                <li data-name="animation-fill-mode" data-type="애니메이션"><strong>animation-fill-mode</strong> : 속성은 애니메이션이 끝난 후 상태를 설정한다.</li>
                <li data-name="animation-iteration-count" data-type="애니메이션"><strong>animation-iteration-count</strong> : 애니메이션 반복 횟수를 설정한다.</li>
                <li data-name="animation-name" data-type="애니메이션"><strong>animation-name</strong> : 애니메이션 keyframe 이름 설정한다.</li>
                <li data-name="	animation-play-state" data-type="애니메이션"><strong>	animation-play-state</strong> : 애니메이션 진행상태를 설정합니다.</li>
                <li data-name="animation-timeline" data-type="애니메이션"><strong>animation-timeline</strong> : 요소에 적용할 스크롤 애니메이션을 설명하는 하나 이상의 이름을 지정합니다.</li>
                <li data-name="animation-timing-function" data-type="애니메이션"><strong>animation-timing-function</strong> : 애니메이션 움직임의 속도를 설정합니다.</li>
                <li data-name="appearance" data-type="기타"><strong>appearance</strong> : 운영 체제의 테마를 기반으로 하는 UI 컨트롤의 기본 모양을 제어하는 ​​데 사용됩니다. </li>
                <li data-name="aspect-ratio" data-type="기타"><strong>aspect-ratio</strong> : 디스플레이 화면 가로와 세로 길이의 비율을 설정합니다. </li>
                <li data-name="backdrop-filter"data-type="효과"><strong>backdrop-filter</strong> : 요소 뒤 영역에 흐림 또는 색상 이동과 같은 그래픽 효과를 적용할 수 있습니다.</li>
                <li data-name="backface-visibility"data-type="기타"><strong>backface-visibility</strong> : 사용자를 향할 때 요소의 뒷면을 볼 수 있는지 여부를 설정합니다. </li>
                <li data-name="background"data-type="백그라운드"><strong>background</strong> : 백그라운드 속성을 일괄적으로 설정합니다.</li>
                <li data-name="background-attachment"data-type="백그라운드"><strong>background-attachment</strong> : 배경 이미지의 고정 여부를 설정합니다.</li>
                <li data-name="background-blend-mode"data-type="백그라운드"><strong>background-blend-mode</strong> : 배경을 혼합했을 때 그래픽 효과를 설정합니다.</li>
                <li data-name="background-clip"data-type="백그라운드"><strong>background-clip</strong> : 백그라운드 이미지의 위치 기준점을 설정합니다.</li>
                <li data-name="background-color"data-type="백그라운드"><strong>background-color</strong> : 백그라운드 색을 설정합니다.</li>
                <li data-name="background-image"data-type="백그라운드"><strong>background-image</strong> : 백그라운드 이미지 속성을 설정합니다.</li>
                <li data-name="background-origin"data-type="백그라운드"><strong>background-origin</strong> : 백그라운드 이미지의 위치 기준점을 설정하기 위한 속성입니다.</li>
                <li data-name="background-position"data-type="백그라운드"><strong>background-position</strong> : 백그라운드 이미지의 위치 영역을 설정합니다.</li>
                <li data-name="background-position-x"data-type="백그라운드"><strong>background-position-x</strong> : 백그라운드 이미지의 x축 위치 영역을 설정합니다.</li>
                <li data-name="background-position-y"data-type="백그라운드"><strong>background-position-y</strong> : 백그라운드 이미지의 y축 위치 영역을 설정합니다.</li>
                <li data-name="background-repeat"data-type="백그라운드"><strong>background-repeat</strong> : 백그라운드 이미지 반복 여부를 설정합니다.</li>
                <li data-name="background-size"data-type="백그라운드"><strong>background-size</strong> : 백그라운드 이미지 사이즈를 설정합니다.</li>
                <li data-name="block-size"data-type="기타"><strong>block-size</strong> : 블록의 가로 또는 세로 크기를 정의합니다.</li>
                <li data-name="border"data-type="기타"><strong>border</strong> : 테두리 속성을 일괄적으로 설정합니다.</li>
                <li data-name="border-block"data-type="기타"><strong>border-block</strong> : 블록 테두리 속성 값을 스타일 시트의 한 위치에 설정하기 위한 약식 속성 입니다.</li>
                <li data-name="border-block-color"data-type="기타"><strong>border-block-color</strong> : 블록 테두리 색상을 정의합니다.</li>
                <li data-name="border-block-end"data-type="기타"><strong>border-block-end</strong> : 스타일 시트의 한 위치에 설정하기 위한 약식 속성입니다.</li>
                <li data-name="border-block-end-color"data-type="기타"><strong>border-block-end-color</strong> : 테두리 색상에 매핑되는 요소의 논리적 블록 끝 테두리 색상을 정의합니다</li>
                <li data-name="border-block-end-style"data-type="기타"><strong>border-block-end-style</strong> : 테두리 스타일에 매핑되는 요소의 논리적 블록 끝 테두리 스타일을 정의합니다.</li>
                <li data-name="border-block-end-width"data-type="기타"><strong>border-block-end-width</strong> : 블록 끝 테두리 너비를 정의합니다.</li>
                <li data-name="border-block-start"data-type="기타"><strong>border-block-start</strong> : 개별 논리적 블록 시작 테두리 속성 값을 스타일 시트의 한 위치에 설정하기 위한 약식 속성입니다.</li>
                <li data-name="border-block-start-color"data-type="기타"><strong>border-block-start-color</strong> : 테두리 색상에 매핑되는 요소의 논리적 블록 시작 테두리 색상을 정의합니다.</li>
                <li data-name="border-block-start-style"data-type="기타"><strong>border-block-start-style</strong> : 테두리 스타일에 매핑되는 요소의 논리적 블록 시작 테두리 스타일을 정의합니다.</li>
                <li data-name="border-block-end-width"data-type="기타"><strong>border-block-end-width</strong> : 너비에 매핑되는 요소의 논리적 블록 끝 테두리 너비를 정의합니다.</li>
                <li data-name="border-block-start"data-type="기타"><strong>border-block-start</strong> : 블록 시작 테두리 속성 값을 스타일 시트의 한 위치에 설정하기 위한 약식 속성입니다.</li>
                <li data-name="border-block-start-color"data-type="기타"><strong>border-block-start-color</strong> : 테두리 색상에 매핑되는 요소의 논리적 블록 시작 테두리 색상을 정의합니다.</li>
                <li data-name="border-block-start-style"data-type="기타"><strong>border-block-start-style</strong> : 스타일에 매핑되는 요소의 논리적 블록 시작 테두리 스타일을 정의합니다.</li>
                <li data-name="border-block-start-width"data-type="기타"><strong>border-block-start-width</strong> : 블록 시작 테두리 너비를 정의합니다.</li>
                <li data-name="border-block-style"data-type="기타"><strong>border-block-style</strong> :  블록 테두리 스타일을 정의합니다.</li>
                <li data-name="border-block-width"data-type="기타"><strong>border-block-width</strong> :  블록 테두리 너비를 정의합니다.</li>
                <li data-name="border-bottom"data-type="기타"><strong>border-bottom</strong> :  아래쪽 속성을 일괄적으로 설정합니다.</li>
                <li data-name="border-bottom-color"data-type="기타"><strong>border-bottom-color</strong> :  테두리 아래쪽 색 속성을 설정합니다.</li>
                <li data-name="border-bottom-left-radius"data-type="기타"><strong>border-bottom-left-radius</strong> :  아래 왼쪽 모서리 굴곡을 설정합니다.</li>
                <li data-name="border-bottom-right-radius"data-type="기타"><strong>border-bottom-right-radius</strong> :  아래 오른쪽 모서리 굴곡을 설정합니다.</li>
                <li data-name="border-bottom-style"data-type="기타"><strong>border-bottom-style</strong> :  테두리 아래쪽 스타일 속성을 설정합니다.</li>
                <li data-name="border-bottom-width"data-type="기타"><strong>border-bottom-width</strong> :  테두리 아래쪽 두께 속성을 설정합니다.</li>
                <li data-name="border-collapse"data-type="기타"><strong>border-collapse</strong> :  테두리 사이의 간격을 설정합니다.</li>
                <li data-name="border-color"data-type="기타"><strong>border-color</strong> :  모든 면의 테두리를 설정합니다.</li>
                <li data-name="border-end-end-radius"data-type="기타"><strong>border-end-end-radius</strong> :  방향에 따라 달라지는 물리적 테두리 반경에 매핑되는 요소의 논리적 테두리 반경을 정의합니다.</li>
                <li data-name="border-end-start-radiusv"data-type="기타"><strong>border-end-start-radius</strong> : 테두리 반경에 매핑되는 요소의 논리적 테두리 반경을 정의합니다.</li>
                <li data-name="border-image"data-type="기타"><strong>border-image</strong> : 주어진 요소 주위에 이미지를 그립니다 .</li>
                <li data-name="border-image-outset"data-type="기타"><strong>border-image-outset</strong> : 테두리 상자에서 설정되는 거리를 설정합니다.</li>
                <li data-name="border-image-repeat"data-type="기타"><strong>border-image-repeat</strong> : 이미지 크기에 맞게 조정되는 방법을 정의합니다.</li>
                <li data-name="border-image-slice"data-type="기타"><strong>border-image-slice</strong> : 	지정된 이미지를 영역으로 나눕니다.</li>
                <li data-name="border-image-source"data-type="기타"><strong>border-image-source</strong> : 	테두리 이미지를 만드는 데 사용되는 소스 이미지를 설정합니다.</li>
                <li data-name="border-image-width"data-type="기타"><strong>border-image-width</strong> : 테두리 이미지 너비를 설정합니다.</li>
                <li data-name="border-inline"data-type="기타"><strong>border-inline</strong> : 인라인 테두리 속성 값을 설정한다.</li>
                <li data-name="border-inline-color"data-type="기타"><strong>border-inline-color</strong> : 모드,방향 및 텍스트 방향에 따라 인라인 테두리 색상을 정의한다.</li>
                <li data-name="border-inline-end"data-type="기타"><strong>border-inline-end</strong> : 인라인 끝 테두리 속성 값을 설정 합니다.</li>
                <li data-name="border-inline-end-color"data-type="기타"><strong>border-inline-end-color</strong> : 인라인 끝 테두리 색상을 정의합니다.</li>
                <li data-name="border-inline-end-style"data-type="기타"><strong>border-inline-end-style</strong> : 인라인 끝 테두리 스타일을 정의합니다.</li>
                <li data-name="border-inline-end-width"data-type="기타"><strong>border-inline-end-width</strong> : 인라인 끝 테두리 너비를 정의합니다.</li>
                <li data-name="border-inline-start"data-type="기타"><strong>border-inline-start</strong> : 테두리 속성 값을 설정하는 약식속성이다.</li>
                <li data-name="border-inline-start-color"data-type="기타"><strong>border-inline-start-color</strong> : 인라인 시작 테두리 색상을 정의합니다.</li>
                <li data-name="border-inline-start-style"data-type="기타"><strong>border-inline-start-style</strong> : 인라인 시작 테두리 스타일을 정의합니다.</li>
                <li data-name="border-inline-start-width"data-type="기타"><strong>border-inline-start-width</strong> : 인라인 시작 테두리 너비를 정의합니다.</li>
                <li data-name="border-inline-style"data-type="기타"><strong>border-inline-style</strong> : 인라인 테두리 스타일을 정의합니다.</li>
                <li data-name="border-inline-width"data-type="기타"><strong>border-inline-width</strong> : 인라인 테두리 너비를 정의합니다.</li>
                <li data-name="border-left"data-type="기타"><strong>border-left</strong> : 왼쪽 테두리의 모든 속성을 설정합니다.</li>
                <li data-name="border-left-color"data-type="기타"><strong>border-left-color</strong> : 왼쪽 테두리 색상을 설정합니다.</li>
                <li data-name="border-left-style"data-type="기타"><strong>border-left-style</strong> : 요소의 왼쪽 테두리 선 스타일을 설정합니다.</li>
                <li data-name="border-left-width"data-type="기타"><strong>border-left-width</strong> : 왼쪽 테두리 너비를 설정합니다.</li>
                <li data-name="border-radius"data-type="기타"><strong>border-radius</strong> : 요소의 바깥쪽 테두리 모서리를 둥글게 만듭니다.</li>
                <li data-name="border-right"data-type="기타"><strong>border-right</strong> : 오른쪽 테두리의 모든 속성을 설정합니다.</li>
                <li data-name="border-right-color"data-type="기타"><strong>border-right-color</strong> : 오른쪽 테두리 색상을 설정합니다.</li>
                <li data-name="border-right-style"data-type="기타"><strong>border-right-style</strong> : 오른쪽 테두리 선 스타일을 설정합니다.</li>
                <li data-name="border-right-width"data-type="기타"><strong>border-right-width</strong> : 요소의 오른쪽 테두리 너비를 설정합니다.</li>
                <li data-name="border-spacing"data-type="기타"><strong>border-spacing</strong> : 셀의 테두리 사이의 거리를 설정합니다.</li>
            </ul>
        </div>
    </div>
</div>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'EF_Diary';
    color: #223547;
    }
    *, *:before, *:after {
    box-sizing:border-box;
    }
    a {
    color: #223547;
    text-decoration: none;
    }
    li {
    list-style: none;
    }
    :root {
    --htmlColor : #223547;
    --cssColor : #8667ad;
    --javascriptColor : #aa6655;
    }
    /* header */
    #header {
    display: flex;
    justify-content: space-between;
    }
    #header h1 {
    margin: 10px;
    font-family: 'Tmon';
    font-size: 40px;
    }
    #header nav {
    margin: 10px;
    }
    #header nav li {
    position: relative;
    display: inline;
    }
    #header nav li a {
    width: 30px;
    height: 30px;
    border: 1px solid var(--htmlColor);
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    line-height: 30px;
    font-family: 'EF_Diary';
    }
    #header nav li.active a {
    background-color: #223547;
    color: #fff;
    }
    #header nav li .sub {
    position: absolute;
    left: 0;
    top: 35px;
    width: 400px;
    }
    #header nav li .sub li a {
    width: auto;
    background-color: transparent;
    color: #223547;
    border: 0;
    text-align: left;
    line-height: 1.2;
    }
    #header nav li .sub li.active a {
    text-decoration: underline;
    }
    /* main */
    #main {
    margin: 50px 10px;
    }
    .search__wrap {
    max-width: 1400px;
    margin: 0 auto;
    border: 3px solid var(--htmlColor);
    border-radius: 20px;
    background-color: #F1F3F6;
    padding: 30px;
    text-align: center;
    }
    .search__wrap > span {
    font-size: 20px;
    margin-bottom: 20px;
    display: inline-block;
    }
    .search__wrap > h1 {
    font-family: 'Tmon';
    color: #223547;
    font-size: 6vw;
    margin-bottom: 10px;
    }
    .search__box {
    margin-bottom: 40px;
    }
    .search__box label {
    position:absolute;
    clip:rect(0 0 0 0);
    width:1px;
    height:1px;
    margin:-1px;
    overflow:hidden;
    }
    .search__box input {
    border: 2px solid var(--htmlColor);
    padding: 15px 40px;
    width: 70%;
    border-radius: 50px;
    font-size: 20px;
    }
    
    .search__list li {
    text-align: left;
    line-height: 1.7;
    }
    .search__list li.hide{
    display: none;
    }
    .search__list li.show{
    display: block;
    }
    .search__info {
    text-align: right;
    margin-bottom: 30px;
    padding-bottom: 10px;
    border-bottom: 2px dashed var(--htmlColor);
    }
    .search__info .type {
    text-align: center;
    margin-bottom: 10px;
    }
    @media (max-width: 600px){
    .search__wrap {
    padding: 20px;
    }
    .search__wrap > span {
    font-size: 16px;
    margin-bottom: 10px;
    }
    .search__wrap > h1 {
    font-size: 44px;
    }
    .search__box input {
    font-size: 16px;
    padding: 12px 30px;
    }
    }
    /* footer */
    #footer {
    text-align: center;
    }
    #footer a {
    color: #000;
    font-family: 'EF_Diary';
    padding-bottom: 50px;
    }
    #footer a:hover {
    text-decoration: underline;
    }
inclides()를 이용하여 CSS 속성 검색하기

CSS 태그 검색하기

플렉스, 애니메이션, 백그라운드, 기타 등등 유형 별로 검색해보세요.
전체 속성 갯수 :
  • aLign-content : 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다.
  • aLign-items : 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다.
  • aLign-self : 개별적인 콘텐츠 아이템의 정렬 상태를 설정합니다.
  • all : 요소의 속성을 초기화 또는 상속을 설정합니다.
  • animation : 애니메이션과 관련된 속성을 일괄적으로 설정합니다.
  • animation-delay : 애니메이션 지연 시간을 설정합니다.
  • animation-direction : 속성은 애니메이션 움직임 방향 설정한다.
  • animation-duration : 속성은 애니메이션 움직임 시간을 설정한다.
  • animation-fill-mode : 속성은 애니메이션이 끝난 후 상태를 설정한다.
  • animation-iteration-count : 애니메이션 반복 횟수를 설정한다.
  • animation-name : 애니메이션 keyframe 이름 설정한다.
  • animation-play-state : 애니메이션 진행상태를 설정합니다.
  • animation-timeline : 요소에 적용할 스크롤 애니메이션을 설명하는 하나 이상의 이름을 지정합니다.
  • animation-timing-function : 애니메이션 움직임의 속도를 설정합니다.
  • appearance : 운영 체제의 테마를 기반으로 하는 UI 컨트롤의 기본 모양을 제어하는 ​​데 사용됩니다.
  • aspect-ratio : 디스플레이 화면 가로와 세로 길이의 비율을 설정합니다.
  • backdrop-filter : 요소 뒤 영역에 흐림 또는 색상 이동과 같은 그래픽 효과를 적용할 수 있습니다.
  • backface-visibility : 사용자를 향할 때 요소의 뒷면을 볼 수 있는지 여부를 설정합니다.
  • background : 백그라운드 속성을 일괄적으로 설정합니다.
  • background-attachment : 배경 이미지의 고정 여부를 설정합니다.
  • background-blend-mode : 배경을 혼합했을 때 그래픽 효과를 설정합니다.
  • background-clip : 백그라운드 이미지의 위치 기준점을 설정합니다.
  • background-color : 백그라운드 색을 설정합니다.
  • background-image : 백그라운드 이미지 속성을 설정합니다.
  • background-origin : 백그라운드 이미지의 위치 기준점을 설정하기 위한 속성입니다.
  • background-position : 백그라운드 이미지의 위치 영역을 설정합니다.
  • background-position-x : 백그라운드 이미지의 x축 위치 영역을 설정합니다.
  • background-position-y : 백그라운드 이미지의 y축 위치 영역을 설정합니다.
  • background-repeat : 백그라운드 이미지 반복 여부를 설정합니다.
  • background-size : 백그라운드 이미지 사이즈를 설정합니다.
  • block-size : 블록의 가로 또는 세로 크기를 정의합니다.
  • border : 테두리 속성을 일괄적으로 설정합니다.
  • border-block : 블록 테두리 속성 값을 스타일 시트의 한 위치에 설정하기 위한 약식 속성 입니다.
  • border-block-color : 블록 테두리 색상을 정의합니다.
  • border-block-end : 스타일 시트의 한 위치에 설정하기 위한 약식 속성입니다.
  • border-block-end-color : 테두리 색상에 매핑되는 요소의 논리적 블록 끝 테두리 색상을 정의합니다
  • border-block-end-style : 테두리 스타일에 매핑되는 요소의 논리적 블록 끝 테두리 스타일을 정의합니다.
  • border-block-end-width : 블록 끝 테두리 너비를 정의합니다.
  • border-block-start : 개별 논리적 블록 시작 테두리 속성 값을 스타일 시트의 한 위치에 설정하기 위한 약식 속성입니다.
  • border-block-start-color : 테두리 색상에 매핑되는 요소의 논리적 블록 시작 테두리 색상을 정의합니다.
  • border-block-start-style : 테두리 스타일에 매핑되는 요소의 논리적 블록 시작 테두리 스타일을 정의합니다.
  • border-block-end-width : 너비에 매핑되는 요소의 논리적 블록 끝 테두리 너비를 정의합니다.
  • border-block-start : 블록 시작 테두리 속성 값을 스타일 시트의 한 위치에 설정하기 위한 약식 속성입니다.
  • border-block-start-color : 테두리 색상에 매핑되는 요소의 논리적 블록 시작 테두리 색상을 정의합니다.
  • border-block-start-style : 스타일에 매핑되는 요소의 논리적 블록 시작 테두리 스타일을 정의합니다.
  • border-block-start-width : 블록 시작 테두리 너비를 정의합니다.
  • border-block-style : 블록 테두리 스타일을 정의합니다.
  • border-block-width : 블록 테두리 너비를 정의합니다.
  • border-bottom : 아래쪽 속성을 일괄적으로 설정합니다.
  • border-bottom-color : 테두리 아래쪽 색 속성을 설정합니다.
  • border-bottom-left-radius : 아래 왼쪽 모서리 굴곡을 설정합니다.
  • border-bottom-right-radius : 아래 오른쪽 모서리 굴곡을 설정합니다.
  • border-bottom-style : 테두리 아래쪽 스타일 속성을 설정합니다.
  • border-bottom-width : 테두리 아래쪽 두께 속성을 설정합니다.
  • border-collapse : 테두리 사이의 간격을 설정합니다.
  • border-color : 모든 면의 테두리를 설정합니다.
  • border-end-end-radius : 방향에 따라 달라지는 물리적 테두리 반경에 매핑되는 요소의 논리적 테두리 반경을 정의합니다.
  • border-end-start-radius : 테두리 반경에 매핑되는 요소의 논리적 테두리 반경을 정의합니다.
  • border-image : 주어진 요소 주위에 이미지를 그립니다 .
  • border-image-outset : 테두리 상자에서 설정되는 거리를 설정합니다.
  • border-image-repeat : 이미지 크기에 맞게 조정되는 방법을 정의합니다.
  • border-image-slice : 지정된 이미지를 영역으로 나눕니다.
  • border-image-source : 테두리 이미지를 만드는 데 사용되는 소스 이미지를 설정합니다.
  • border-image-width : 테두리 이미지 너비를 설정합니다.
  • border-inline : 인라인 테두리 속성 값을 설정한다.
  • border-inline-color : 모드,방향 및 텍스트 방향에 따라 인라인 테두리 색상을 정의한다.
  • border-inline-end : 인라인 끝 테두리 속성 값을 설정 합니다.
  • border-inline-end-color : 인라인 끝 테두리 색상을 정의합니다.
  • border-inline-end-style : 인라인 끝 테두리 스타일을 정의합니다.
  • border-inline-end-width : 인라인 끝 테두리 너비를 정의합니다.
  • border-inline-start : 테두리 속성 값을 설정하는 약식속성이다.
  • border-inline-start-color : 인라인 시작 테두리 색상을 정의합니다.
  • border-inline-start-style : 인라인 시작 테두리 스타일을 정의합니다.
  • border-inline-start-width : 인라인 시작 테두리 너비를 정의합니다.
  • border-inline-style : 인라인 테두리 스타일을 정의합니다.
  • border-inline-width : 인라인 테두리 너비를 정의합니다.
  • border-left : 왼쪽 테두리의 모든 속성을 설정합니다.
  • border-left-color : 왼쪽 테두리 색상을 설정합니다.
  • border-left-style : 요소의 왼쪽 테두리 선 스타일을 설정합니다.
  • border-left-width : 왼쪽 테두리 너비를 설정합니다.
  • border-radius : 요소의 바깥쪽 테두리 모서리를 둥글게 만듭니다.
  • border-right : 오른쪽 테두리의 모든 속성을 설정합니다.
  • border-right-color : 오른쪽 테두리 색상을 설정합니다.
  • border-right-style : 오른쪽 테두리 선 스타일을 설정합니다.
  • border-right-width : 요소의 오른쪽 테두리 너비를 설정합니다.
  • border-spacing : 셀의 테두리 사이의 거리를 설정합니다.