프리이미지
사이트 내 전체검색

CSS 라운드 박스 자동 생성 Rounded Corner Generator

페이지 정보

작성일12-07-19 12:59

본문

Rounded Corner Generator

This generator will create rounded corners in CSS that you can use in your DIV Containers.


Outer Background Color:

 

Inner Background Color:

 

Border Color:

 

Text Color:

 

Rounded Corner Example


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.


CSS Code


#rnd_container {background: #FFFFFF; margin:1px;}
    
    .rnd_top, .rnd_bottom {display:block; background:#FFFFFF; font-size:1px;}
    .rnd_b1, .rnd_b2, .rnd_b3, .rnd_b4 {display:block; overflow:hidden;}
    .rnd_b1, .rnd_b2, .rnd_b3 {height:1px;}
    .rnd_b2, .rnd_b3, .rnd_b4 {background:#FFFFFF; border-left:1px solid #F0F0F0; border-right:1px solid #F0F0F0;}
    .rnd_b1 {margin:0 5px; background:#F0F0F0;}
    .rnd_b2 {margin:0 3px; border-width:0 2px;}
    .rnd_b3 {margin:0 2px;}
    .rnd_b4 {height:2px; margin:0 1px;}
    
    .rnd_content {
    display:block;
    border:0 solid #F0F0F0;
    border-width:0 1px;
    padding: 4px;
    background:#FFFFFF;
    color:#000000;
}

HTML Code


<div id="rnd_container">
<b class="rnd_top"><b class="rnd_b1"></b><b class="rnd_b2"></b><b class="rnd_b3"></b><b class="rnd_b4"></b></b>
<div class="rnd_content"> 
Your Text Goes Here
</div>
<b class="rnd_bottom"><b class="rnd_b4"></b><b class="rnd_b3"></b><b class="rnd_b2"></b><b class="rnd_b1"></b></b>
</div>

Credit for this code goes to DevDude

추천 0
게시물 검색