HElp add dotted boder like in picture

aiva286

01-08-2013, 08:00 PM

Hello guys please help add dotted border like in picture. Thanks.
http://s13.postimage.org/y9m3l53kn/help.png
My code. Thanks for help.
#wrapper {
width:1000px;
margin:0 auto 0 auto;
}

#header {
text-align:center;
margin-bottom:30px;
}

.box {
display:inline;
}

.box img {
width:235px;
height:250px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Themespit.com</title>
</head>
<body>
<div id='wrapper'>
<div id='header'><h1>Header</h1></div>
<div class='box'>
<img src='http://www.animeminusfam.lt/anime_pictures/dbz.jpg'></img>
</div>
<div class='box'>
<img src='http://www.animeminusfam.lt/anime_pictures/dbz.jpg'></img>
</div><div class='box'>
<img src='http://www.animeminusfam.lt/anime_pictures/dbz.jpg'></img>
</div><div class='box'>
<img src='http://www.animeminusfam.lt/anime_pictures/dbz.jpg'></img>
</div><div class='box'>
<img src='http://www.animeminusfam.lt/anime_pictures/dbz.jpg'></img>
</div><div class='box'>
<img src='http://www.animeminusfam.lt/anime_pictures/dbz.jpg'></img>
</div><div class='box'>
<img src='http://www.animeminusfam.lt/anime_pictures/dbz.jpg'></img>
</div><div class='box'>
<img src='http://www.animeminusfam.lt/anime_pictures/dbz.jpg'></img>
</div>
</div>
</body>
</html>

TFlan

01-08-2013, 09:56 PM

You can use the following in any variation you need to accomplish what you want:

border:1px dotted #000;

Apply this style to your .box style, with the respective border-top, border-left, border-right, and/or border-bottom

aiva286

01-08-2013, 10:45 PM

but if i will do border-left last box will have border but in picture there is no border.

Excavator

01-09-2013, 12:40 AM

Hello aiva286,
You just need to pay extra care to what element you are applying your dotted border to. Like TFlan said, any variation you need to accomplish what you want.

Look at this example - <!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Themespit.com</title>
<style type="text/css">
#wrapper {
width: 1108px;
margin: 0 auto;
}
#header {
text-align: center;
margin-bottom: 30px;
}
.row {
overflow: auto;
background: #ccc;
border-top: 1px dotted #000;
}
.one {border-bottom: 1px dotted #000;}
.box {
padding: 20px;
float: left;
border-top-style: none;
border-right: 1px dotted #000;
border-bottom-style: none;
border-left: 1px dotted #000;
}
.box img {
height: 250px;
width: 235px;
}
</style>
</head>
<body>
<div id='wrapper'>
<div id='header'><h1>Header</h1></div>
<div class="row">
<div class='box'><img src='http://www.animeminusfam.lt/anime_pictures/dbz.jpg' alt="description" /></div>
<div class='box'><img src='http://www.animeminusfam.lt/anime_pictures/dbz.jpg' alt="description" /></div>
<div class='box'><img src='http://www.animeminusfam.lt/anime_pictures/dbz.jpg' alt="description" /></div>
<div class='box'><img src='http://www.animeminusfam.lt/anime_pictures/dbz.jpg' alt="description" /></div>
</div>
<div class="row one">
<div class='box'><img src='http://www.animeminusfam.lt/anime_pictures/dbz.jpg' alt="description" /></div>
<div class='box'><img src='http://www.animeminusfam.lt/anime_pictures/dbz.jpg' alt="description" /></div>
<div class='box'><img src='http://www.animeminusfam.lt/anime_pictures/dbz.jpg' alt="description" /></div>
<div class='box'><img src='http://www.animeminusfam.lt/anime_pictures/dbz.jpg' alt="description" /></div>
</div>
</div>
</body>
</html>