Css and image rounded border

This article describes the border effect of rounded corners with images. If used properly, it will certainly increase the color of your page.

Apply an image to the rounded border-example

 

The code is as follows:

Copy code

<Style type = "text/css"> . Box,. box. content,. box. title,. box. title * {background: # FFF url('bg_box_green_800x800.gif ') 100% 100% no-repeat ;} . Box {margin: 3px 0; padding: 0 15px 0 0 ;} . Box. title {background-position: 100% 0; margin: 0-15px 0 0 0; padding: 0 15px 0 0 ;} . Box. title * {background-position: 0 0; margin: 0; padding: 15px 0 5px 15px; height: 1% ;} . Box. content {background-position: 0 100%; margin-right: 0px; padding: 0 0 15px 15px ;} . Box. title h4 {color: # 227A1D ;} . Box. content p {margin: 0; padding: 8px 0 ;}   </Style> <Div class = "box"> <Div class = "title"> <H4> Codebit.cn-aggregation of small segment essential code </Div> <Div class = "content">   <P> In programming, we usually accumulate a lot of simple, http://www.111cn.net effective and reusable small pieces of code, a simple string processing function or a regular expression that verifies the mail address, or a simple file Upload class, or even a good CSS navigation style. These tips save us a lot of time, but after a long time, the number of codes is increasing, and it takes a lot of time to find them. Therefore, this site is committed to collecting and sorting out some similar small knowledge, and strive to improve the quality of the article search, so as to facilitate your reference, and also to support the open source business. </P>   </Div> </Div>