Using image for border : border « CSS « HTML / CSS






  1. HTML / CSS
  2. CSS
  3. border

Using image for border

   

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Zion Narrows</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style rel="stylesheet" type="text/css">
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/

body {
  margin: 20px 0;
  padding: 0;
  background: #FFFFFF;
  font: normal small "Trebuchet MS", Arial, Helvetica, sans-serif;
  color: #666666;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  text-transform: uppercase;
}

a {
  color: #5D0E0E;
}

a:hover {
  text-decoration: none;
  color: #FF0000;
}

.image {
  float: left;
  margin: 0 15px 10px 0;
}

/* Header */

#header {
  width: 760px;
  height: 120px;
  margin: 0 auto;
  background: #000000 url(zionarrows-images/img1.jpg);
}

#header h1, #header h2 {
  float: left;
  padding: 94px 0 0 7px;
  font-size: 18px;
}

#header a {
  text-decoration: none;
  color: #FFFFFF;
}

/* Pages */

#pages {
  clear: both;
  width: 760px;
  height: 43px;
  margin: 0 auto;
  background: #000000 url(zionarrows-images/img2.gif);
}

#pages h2 {
  display: none;
}

#pages ul {
  float: right;
  margin: 0;
  padding: 7px 0 0 0;
  list-style: none;
}

#pages li {
  display: inline;
}

#pages a {
  display: block;
  float: left;
  height: 25px;
  margin: 0 2px 0 0;
  padding: 7px 15px 0 15px;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: -1px;
  font-size: 14px;
  font-weight: bold;
  color: #FFFFFF;
}

#pages a:hover, #pages .active a {
  padding-left: 14px;
  padding-right: 14px;
  background: #580505 url(zionarrows-images/img3.gif);
  border: 1px solid #000000;
  border-bottom: none;
}

/* Boxed */

.boxed {
  float: right;
  width: 180px;
  margin-bottom: 10px;
  padding-left: 10px;
}

.boxed .heading {
  height: 26px;
  padding: 6px 0 0 10px;
  background: #5F1010 url(zionarrows-images/img4.gif);
  border: 1px solid #000000;
  border-bottom: none;
  font-size: 1em;
  color: #FFFFFF;
}

.boxed .content {
  background: #F2F2F2 url(zionarrows-images/img5.gif) repeat-x left bottom;
}

.boxed .content ul {
  margin: 0;
  padding: 10px;
  list-style: none;
}

.boxed .content li {
  padding: 3px 0;
  border-top: 1px dotted #5D0E0E;
}

.boxed .content li.first {
  border: none;
}

.boxed .content a {
  padding-left: 10px;
  background: transparent url(zionarrows-images/img8.gif) no-repeat left center;
  text-decoration: none;
  color: #5D0E0E;
}

.boxed .content a:hover {
  color: #FF0000;
}

/* Posts */

.post {
  background: #F2F2F2 url(zionarrows-images/img5.gif) repeat-x left bottom;
}

.post .title {
  padding: 0 0 0 13px;
  background: #FFFFFF url(zionarrows-images/img9.gif) no-repeat left center;
  color: #000000;
}

.post .posted {
  padding: 2px 10px 4px 10px;
  background: #5F1010 url(zionarrows-images/img4.gif);
  border: 1px solid #000000;
  border-bottom: none;
  font-size: .7em;
  font-weight: normal;
  color: #FFFFFF;
}

.post .story {
  padding: 10px 20px;
}

.post .meta {
  padding: 1px 10px;
}

/* Content */

#content {
  width: 760px;
  margin: 0 auto;
  padding: 20px 0;
}

/* Posts */

#posts {
  float: left;
  width: 370px;
}

/* Archives */

#archives {
}

/* Search */

#search form {
  margin: 0;
  padding: 20px 10px;
}

#textfield1 {
  width: 110px;
  padding: 2px 5px;
  background: #894F4F url(zionarrows-images/img6.gif) repeat-x;
  border: 1px solid #000000;
  font: bold 10px "Trebuchet MS", Arial, Helvetica, sans-serif;
  color: #FFFFFF;
}

#submit1 {
  width: 30px;
  background: #5F1010 url(zionarrows-images/img7.gif) repeat-x;
  border: 1px solid #000000;
  text-transform: uppercase;
  font: bold 9px "Trebuchet MS", Arial, Helvetica, sans-serif;
  color: #FFFFFF;
}

/* Footer */

#footer {
  clear: both;
  width: 760px;
  margin: 0 auto;
  background: #FFFFFF url(zionarrows-images/img5.gif) repeat-x;
}

#footer p {
  padding: 10px;
  font-size: .8em;
}
</style>


</head>
<body>
<div id="header">
  <h1><a href="">Zion Narrows</a></h1>
  <h2><a href="">Free CSS Templates</a></h2>
</div>
<div id="pages">
  <h2>Pages</h2>
  <ul>
    <li class="active"><a id="page1" href="">Home</a></li>
    <li><a id="page2" href="">My Photos</a></li>
    <li><a id="page3" href="">My Favorites</a></li>
    <li><a id="page4" href="">About Me</a></li>
    <li><a id="page5" href="">Contact Me</a></li>
  </ul>
</div>
<div id="content">
  <div id="posts">
    <div class="post">
      <h2 class="title">Welcome to Zion Narrows!</h2>
      <h3 class="posted">Posted on January 1th, 2007 by Author</h3>
      <div class="story">
        <p><em><strong>Zion Narrows</strong></em> is a free template from <strong>Free CSS Templates</strong> released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 License</a>. The  header photo is from PDPhoto.org. You're free to use it for both commercial or personal use. I only ask that you link back to my site in some way. Enjoy :)</p>
      </div>
      <div class="meta">
        <p>Filed under <a href="" class="category">Uncategorized</a> | <a href="" class="comment">1 Comment &raquo;</a></p>
      </div>
    </div>
    <div class="post">
      <h2 class="title">Sample Tags</h2>
      <h3 class="posted">Posted on January 1st, 2007 by Author</h3>
      <div class="story">
        <p>An ordered list:</p>
        <ol>
          <li><a href="">Nullam et orci in erat viverra ornare.</a></li>
          <li><a href="">Suspendisse quis gravida massa felis.</a></li>
          <li><a href="">Curabitur malesuada turpis nec ante.</a></li>
        </ol>
        <p>A blockquote:</p>
        <blockquote>
          <p>&#8220;Et pulvinar pede ligula a  sapien. Donec fermentum condimentum nisi. Proin iaculis mauris id lorem  viverra molestie. Duis vel orci. Nam consequat. Morbi nec lacus.&#8221;</p>
        </blockquote>
      </div>
      <div class="meta">
        <p>Filed under <a href="" class="category">Uncategorized</a> | <a href="" class="comment">1 Comment &raquo;</a></p>
      </div>
    </div>
  </div>
  <div id="archives" class="boxed">
    <h2 class="heading">Archives</h2>
    <div class="content">
      <ul>
        <li class="first"><a href="">February</a> (7)</li>
        <li><a href="">January 2007</a> (31)</li>
        <li><a href="">December 2006</a> (31)</li>
        <li><a href="">November 2006</a> (30)</li>
        <li><a href="">October 2006</a> (31)</li>
        <li><a href="">September 2006</a> (30)</li>
        <li><a href="">August 2006</a> (31)</li>
        <li><a href="">July 2006</a> (31)</li>
        <li><a href="">June 2006</a> (30)</li>
        <li><a href="">May 2006</a> (31)</li>
        <li><a href="">April 2006</a> (30)</li>
        <li><a href="">March 2006</a> (31)</li>
        <li><a href="">February 2006</a> (28)</li>
        <li><a href="">January 2006</a> (31)</li>
        <li><a href="">December 2005</a> (31)</li>
        <li><a href="">November 2005</a> (30)</li>
        <li><a href="">October 2005</a> (31)</li>
        <li><a href="">September 2005</a> (30)</li>
        <li><a href="">August 2005</a> (31)</li>
        <li><a href="">July 2005</a> (31)</li>
        <li><a href="">June 2005</a> (30)</li>
        <li><a href="">May 2005</a> (31)</li>
        <li><a href="">April 2005</a> (30)</li>
        <li><a href="">March 2005</a> (31)</li>
      </ul>
    </div>
  </div>
  <div id="search" class="boxed">
    <h2 class="heading">Search</h2>
    <div class="content">
      <form method="get" action="">
        <div>
          <input type="text" id="textfield1" name="textfield1" value="" size="18" />
          <input type="submit" id="submit1" name="submit1" value="Go" />
        </div>
      </form>
    </div>
  </div>
  <div id="categories" class="boxed">
    <h2 class="heading">Categories</h2>
    <div class="content">
      <ul>
        <li class="first"><a href="">Quisque vestibulum</a></li>
        <li><a href="">Sed a nisl a lacus</a></li>
        <li><a href="">Quisque sagittis</a></li>
        <li><a href="">Etiam volutpat</a></li>
        <li><a href="">In aliquet hendrerit</a></li>
        <li><a href="">Suspendisse iaculis</a></li>
        <li><a href="">Nam vel risus at</a></li>
        <li><a href="">Praesent sit amet</a></li>
        <li><a href="">Quisque vestibulum</a></li>
        <li><a href="">In aliquet hendrerit</a></li>
        <li><a href="">Suspendisse iaculis</a></li>
        <li><a href="">Nam vel risus at</a></li>
        <li><a href="">Praesent sit amet</a></li>
        <li><a href="">Quisque vestibulum</a></li>
      </ul>
    </div>
  </div>
  <div id="blogroll" class="boxed">
    <h2 class="heading">Blogroll</h2>
    <div class="content">
      <ul>
        <li class="first"><a href="">AnotherFriendlySite.net</a></li>
        <li><a href="">CoolSite.com</a></li>
        <li><a href="">MyBestFriend.com</a></li>
      </ul>
    </div>
  </div>
</div>
<div id="footer">
  <p>Copyright &copy; 2006 Zion Narrows. Designed by <a href="http://www.freecsstemplates.org/"><strong>Free CSS Templates</strong></a></p>
</div>
</body>
</html>








Related examples in the same category

1.'border' Example
2.border width, border style shorthand four values
3.border width, border style shorthand one value
4.border width, border style shorthand, three values
5.border width, border style shorthand two values
6.border: thin solid rgb(0, 0, 0)
7.border: 1em solid black
8.border: medium solid black
9.border: thin solid black
10.border: 1px solid rgb(0, 0, 0);
11.border: 1px solid crimson;
12.border: 1px solid gold;
13.border: 1px solid rgb(200, 200, 200);
14.Style sheet for border properties
15.border-color: red green purple blue; border-width: thin medium thick .25cm;
16.border overwrite
17.Use border-bottom to draw line
18.Dashed border
19.border: 1px dashed #8a795d;
20.Border page border
21.border: 1px solid green;
22.When no border-color is specified, the border color is the value of the color property.
23.border-style: solid dashed double inset;
24.Border with default color
25.border sets the size, pattern, and color of the border surrounding the padding.
26.border: thick solid black
27.Border shortcut setting
28.border shortcut property takes three space-delimited values that represent the border's width, style, and color.
29.border: 40px double black; creates a black, 40-pixel, double-line border.
30.Border with specific setting for four directions
31.This paragraph has a 1 pixel thick, solid black border around it.
32.Border direction
33.Set border to '3px dotted #33333;'
34.Body border: 50px #666 ridge
35.Add border for different columns together
36.Combined style
37.border:none is the default.
38.Border's width cannot be negative because they are inside the margin.
39.Use nested border
40.border property, can be used to specify border-width, border-style, and border-color for all four sides at once.
41.Border cascade