css - Border image on ul tag html -


i have downloaded image of empty frame

enter image description here

i wanted use frame enclose list of business hours

<div class="col-lg-5 col-lg-offset-2 col-sm-6"> <div class="content4"> <ul class="grid cs-style" > <li> <figure> <figcaption> <div class="time-table"> <h3><span class="icon icons-ornament-left"></span> <span class="light">opening</span> time <span class="icon icons-ornament-right"></span></h3>                 <div class="inner-bg  js--timetable">                 <dl class="week-day" data-day="1">                 <dt>monday</dt>                 <dd>9:00-18:00</dd>                 </dl>                 <dl class="week-day light-bg" data-day="2">                 <dt>tuesday</dt>                 <dd>9:00-18:00</dd>                 </dl>                 <dl class="week-day" data-day="3">                 <dt>wednesday</dt>                 <dd>8:00-18:00</dd>                 </dl>                 <dl class="week-day light-bg" data-day="4">                 <dt>thursday</dt>                 <dd>9:00-18:00</dd>                 </dl>                 <dl class="week-day" data-day="5">                 <dt>friday</dt>                 <dd>9:00-18:00</dd>                 </dl>                 <dl class="week-day light-bg" data-day="6">                 <dt>saturday</dt>                 <dd>9:00-18:00</dd>                 </dl>                 <dl class="week-day closed" data-day="0">                 <dt>sunday</dt>                 <dd>closed</dd>                 </dl>                 </div>                         </figcaption>                     </figure>                 </li>             </ul>             </div>                 </div> 

but don't know how put image frame on or around tag. , how resize frame using css or html attributes fit around list.someone please assist.

use border-image

border-image @ mdn

something this:

.time-table {    text-align: center;    display: inline-block;    padding: 10px;    border:60px solid transparent;    border-image:url(http://www.clipartbest.com/cliparts/dc6/e6e/dc6e6e8oi.png) 80 60 60 stretch;  }
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>    <div class="col-lg-5 col-lg-offset-2 col-sm-6"><div class="time-table">    <h3><span class="icon icons-ornament-left"></span> <span class="light">opening</span> time <span class="icon icons-ornament-right"></span></h3>    <div class="inner-bg  js--timetable">      <dl class="week-day" data-day="1">        <dt>monday</dt>        <dd>9:00-18:00</dd>      </dl>      <dl class="week-day light-bg" data-day="2">        <dt>tuesday</dt>        <dd>9:00-18:00</dd>      </dl>      <dl class="week-day" data-day="3">        <dt>wednesday</dt>        <dd>8:00-18:00</dd>      </dl>      <dl class="week-day light-bg" data-day="4">        <dt>thursday</dt>        <dd>9:00-18:00</dd>      </dl>      <dl class="week-day" data-day="5">        <dt>friday</dt>        <dd>9:00-18:00</dd>      </dl>      <dl class="week-day light-bg" data-day="6">        <dt>saturday</dt>        <dd>9:00-18:00</dd>      </dl>      <dl class="week-day closed" data-day="0">        <dt>sunday</dt>        <dd>closed</dd>      </dl>    </div>    </div>


Comments

Popular posts from this blog

java - Jasper subreport showing only one entry from the JSON data source when embedded in the Title band -

mapreduce - Resource manager does not transit to active state from standby -

serialization - Convert Any type in scala to Array[Byte] and back -