border-left: 4px solid #505050; : border left « CSS « HTML / CSS






  1. HTML / CSS
  2. CSS
  3. border left

border-left: 4px solid #505050;

   
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style rel="stylesheet" type="text/css">

#leftside ul.avmenu {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  width: 150px;
}

#leftside ul.avmenu li {
  display: inline;
  padding: 0;
  width: 150px;
}

#leftside ul.avmenu li a {
  background: url(img/menubg.gif) repeat-x bottom left #f4f4f4;
  border-bottom: 1px solid #d8d8d8;
  border-left: 4px solid #ccc;
  border-right: 1px solid #d8d8d8;
  border-top: 1px solid #d8d8d8;
  color: #505050;
  float: left;
  font-size: 1em;
  font-weight: 700;
  margin-bottom: 5px;
  padding: 5px 1px 5px 5px;
  text-decoration: none;
  width: 138px;
}

#leftside ul.avmenu li a:hover,#leftside ul.avmenu li a.current {
  background: url(img/menubg2.gif) repeat-x bottom left #eaeaea;
  border-bottom: 1px solid #b0b0b0;
  border-left: 4px solid #505050;
  border-right: 1px solid #b0b0b0;
  border-top: 1px solid #b0b0b0;
  color: #505050;
}

#leftside ul.avmenu ul {
  font-size: 0.9em;
  margin: 0 0 0 15px;
  padding: 0 0 5px 0;
  width: 133px;
}

#leftside ul.avmenu ul a {
  padding: 3px 1px 3px 5px;
  width: 123px;
}

#leftside ul.avmenu ul ul {
  font-size: 1em;
  width: 120px;
}

#leftside ul.avmenu ul ul a {
  width: 108px;
}
</style>

</head>
<body>
<div id="leftside">
    <ul class="avmenu">
      <li><a href="">Home</a></li>
      <li><a href="">Included styles</a></li>
      <li><a class="current" href="">2 columns</a></li>
      <li><a href="">3 columns</a></li>
      <li><a href="">Theme versions</a></li>
    </ul>
</div>
</body>
</html>








Related examples in the same category

1.'border-left' Example
2.border-left: 1px dashed darkkhaki;
3.border-left: 1px solid crimson;
4.Set border left, right and bottom to an anchor with LI under UL in a DIV
5.Border left Properties