amitabhaghosh197
10/19/2014 - 8:39 PM

display table with rounded corners

display table with rounded corners

<!----------For result like this http://i.imgur.com/4Hkgdeq.png-------------------------------->

 <div class="latest-news clearfix">
                        
                        <h1 class="entry-title">Latest News</h1>
                       <ul>
                  
                         <li><p> 21 Mar</p>
                         <p><h2 class="latest-news-title"> Lorem ipsum dolor sit</h2>
                         <span class="latest-news-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p></li>
                         
                         <li><p> 21 Mar</p>
                         <p><h2 class="latest-news-title"> Lorem ipsum dolor sit</h2>
                         <span class="latest-news-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p></li>
                         
                       
                       
                       </ul>
                     </div><!-----/latest-news-------------------->
.section-front-about-container .latest-news
{
	 margin : 0;
	padding : 0;
	
	}
	
.section-front-about-container .latest-news > ul
{
   	     list-style : none;
	        display : table;
	     margin     : 0;
	     padding    : 0;
	border-collapse : collapse;  /* If not collapse then the border style in child element will not be shown*/
	                             /* Ref : http://stackoverflow.com/questions/7175049/css-displaytable-not-displaying-the-border  */
	
	}

.section-front-about-container .latest-news > ul > li
{
	display       : table-row;
	border-bottom : 1px solid #aeacac;
	width         : 100%;
	background: transparent#0F9;
	/* 
	 * display : table-row property will not allow margin or padding. So for margin & padding
	 * you have to write those properties in the elements which are wrapped inside this table-row.
	 
	 */
	
	}
	

.latest-news-title{
	
  letter-spacing : 0.055em;
font-size-adjust : 0.60;
	       color :#0086cb;
	   font-size : 17px;
	 font-family : 'Archivo Narrow', sans-serif !important;
	font-weight: 700;
	font-style:italic;
	line-height: 25px;
	
	}


.section-front-about-container .latest-news > ul > li > p
{
  
         display : table-cell;
      background : transparent#0C9;
  padding-bottom : 4.125em;
 
	}

.section-front-about-container .latest-news > ul > li > p:first-child{
	
	                width : 83px;
	               height : 83px;
	        border-radius : 50%;
	   -moz-border-radius : 50%;
	-webkit-border-radius : 50%;
	           background : #3c120f;
	                color : #fff;
	          font-family : 'Archivo Narrow', sans-serif;
	          line-height : 30px;
	          font-weight : 700;
	            font-size : 24px;
	           font-style : italic;
	     font-size-adjust : 0.50;
                  padding : 10px 20px;
	           text-align : center;
	              display : block;
	         margin       : 20px 15px 0 0;
			 
	
	}

.section-front-about-container .latest-news > ul > li > p:last-child{
	
	    margin : 0;
	background : transparent#9F3;
	   display : block;
	   
	
	}
@media screen and (-webkit-min-device-pixel-ratio:0) {
	
	.section-front-about-container .latest-news > ul > li > p{
		
		
		}
	
	}
.latest-news-content{
	color : #828180;
	font-size : 14px;
	font-size-adjust : 0.60;
	}