인벤 스크립트에 관심을 가져주셔서 감사합니다.

테두리와 관련된 태그를 문의해 주셨는데요.
조금 더 도움이 되도록 살짝 설명을 추가해 드립니다.

웹 페이지는 페이지의 내용을 나타내는 HTML
페이지의 모양이나 스타일을 정해주는 CSS
그리고 마지막으로 동작을 정의하는 스크립트

세 가지로 구성되어 있습니다. 테두리나 크기, 그리고 정렬까지도 모두 CSS의 영역입니다.
테두리 CSS, 정렬 CSS로 검색하신다면 제가 드리는 설명 이상으로 방대한 설정이 가능합니다.

1. 테두리 CSS의 주요 속성 3가지
테두리의 주요 속성 3가지는 '두께, 선 종류, 색상'입니다. 굉장히 흔하게 사용되기에 붙어 다니는 게 일반적입니다.

테두리를 넣는 방법은 <div><span><img> 모두 관계없이 'style'을 사용해 주시면 됩니다.

<!-- 두께 2, 점선, 녹색 테두리 -->
<div style="border:2px dotted green;"> </div>
<!-- 두께 3, 입체, 빨간 테두리 -->
<span style="border:3px outset red;"> span 사용 </span>

예시와 같이 선 두께 (px), 테두리 스타일, 테두리의 색상을 순서대로 입력해 주시면 됩니다.

- 선 두께는 원하시는 두께를 픽셀 단위로 입력해 주시면 됩니다.

- 테두리 스타일은 대표적으로 아래와 같은 것들이 있습니다.
none : 미표시
dotted : 점선
dashed : 긴 점선
solid : 직선
double : 두 줄
groove : 파여 보이는 줄
ridge : 튀어나와 보이는 줄
inset : 눌린 것 같은 테두리
outset : 입체 버튼 같은 테두리

- 색상은 색상 코드(#12ef4a)나 RGB(123,222,0)의 값도 사용할 수 있습니다.


이외에도 흔하게 사용하는 스타일로는

- 선 두께(border-width) : 위의 픽셀 대신 미리 정해진 값으로 thin, medium, thick 두께를 사용
<div style="border-width:thick;"> </div>

- 둥근 테두리(border-radius) : 모서리의 둥글기를 조절합니다. px로 입력해도 되고, %로 입력해도 됩니다.
<div style="border-radius:5px;"> </div>
<div style="border-radius:10%px;"> </div>
<div style="border-radius:10px 20px 30px 40px;"> 좌측 상단, 우측 상단, 좌측 하단, 우측 하단을 다르게 설정 </div>

- 이미지 테두리(border-image) : 이미지를 사용해 테두리를 정하는 방법입니다. CSS3 부터 사용 가능한 속성으로 일부 브라우저에서는 안될 수 있습니다.
border-image-source : 이미지의 경로를 지정하는 속성
border-image-slice : 이미지 테두리의 안쪽 오프셋
border-image-width : 이미지 테두리의 너빗값을 지정하는 속성
border-image-outset : 이미지 테두리의 바깥쪽 오프셋
border-image-repeat : 이미지의 반복 여부를 지정하는 속성

이미지 테두리의 경우는 사용이 복잡한 편이라 검색을 추천합니다.


2. 정렬과 관련하여는 주로 2가지 스타일을 이용해 주실 수 있습니다.

가로 상에서의 정렬(text-align) : 왼쪽(left), 중앙(center), 오른쪽(right)
<div style="text-align:center;"> 이 사이에 들어가는 이미지와 텍스트는 모두 중앙 정렬이 됩니다.</div>

세로 상에서의 정렬(vertical-align) : 위쪽(top), 중앙(middle), 아래(bottom) - 세로 상에서의 정렬은 "뒤에" 붙는 대상의 정렬 방식을 지시해 줍니다.
<img src="주소" style="vertical-align:middle;"> 이 이미지 뒤에 붙는 텍스트는 이미지의 중간 높이에 표시됩니다.

흐름의 설정(float) : 왼쪽에 대상을 위치(left), 오른쪽에 대상을 위치(right)
<img src="주소" style="float:left;"> 이곳의 텍스트는 왼쪽의 이미지 공간을 비우고, 오른쪽의 모든 영역을 채우며 작성됩니다.


3. 탭과 관련하여

구현해 주신 내용 외에도 이런 방법으로도 구현할 수 있어서 내용을 남겨 놓습니다.
버튼이 눌렸을 때, 다른 탭의 하트가 멈춘다는 것 정도밖에는 차이는 없습니다.

<div data-inven-tabs>
<!-- 탭 버튼1 -->
<div style="float:left;width:85px;height:15px;vertical-align:middle;margin:2 4px;" data-inven-tab-for="tab_1"
data-inven-selected-css="{'_SELF_':{'background':'url(http://upload2.inven.co.kr/upload/2016/04/15/bbs/i10892146597.gif)'}}"
data-inven-unselected-css="{'_SELF_':{'background':'url(http://upload2.inven.co.kr/upload/2016/04/15/bbs/i14064295215.png)'}}"></div>


<!-- 탭 버튼2 -->
<div style="float:left;width:61px;height:17px;vertical-align:middle;margin:0 4px;" data-inven-tab-for="tab_2"
data-inven-selected-css="{'_SELF_':{'background':'url(http://upload2.inven.co.kr/upload/2016/04/15/bbs/i13614807275.gif)'}}"
data-inven-unselected-css="{'_SELF_':{'background':'url(http://upload2.inven.co.kr/upload/2016/04/15/bbs/i12674247868.png)'}}"></div>


<!-- 탭 버튼3 -->
<div style="float:left;width:47px;height:17px;vertical-align:middle;margin:0 4px;" data-inven-tab-for="tab_3"
data-inven-selected-css="{'_SELF_':{'background':'url(http://upload2.inven.co.kr/upload/2016/04/15/bbs/i12252904264.gif)'}}"
data-inven-unselected-css="{'_SELF_':{'background':'url(http://upload2.inven.co.kr/upload/2016/04/15/bbs/i11038265587.png)'}}"></div>

<!-- 왼쪽 흐름 삭제-->
<div style="clear: left;"></div>


내용이 내용이다 보니, 도움이 되었을지 모르겠네요.

이외에도 궁금하신 내용이 있으시면 언제라도 인벤 스크립트 게시판에 글 남겨주세요.

감사합니다.