CODEWITHSUNDEEP
htmlasp.netcss
Bip
Bip

Reputation: 697

how to set (css) border width?

enter image description here

I want to set solid border width like as picture. What can I do? Thanks for answers

      |
      |
-----   -------
      |
      |

Upvotes: 0

Views: 1575

Answers (6)

user1485916
user1485916

Reputation:

You can use background-image properties in css the best and easy way

http://www.w3schools.com/cssref/pr_background-image.asp

Upvotes: 0

skip405
skip405

Reputation: 6279

You can visually achieve this result if you apply border-radius to the parent container.

The child container needs to have a solid background (that matches the background of the wrapper element). Like so: http://jsfiddle.net/skip405/JgsKM/

Upvotes: 6

rails_id
rails_id

Reputation: 8220

I think you should add 4 child divs for mask borders parent div.

Html

<ul class="list">
<li>
<div id="holder"> <!--parent div--> 
   <div id="maskTopLeft"></div> <!-- child 1 for mask border on top-left --> 
   <div id="maskTopRight"></div> <!-- child 2 for mask border on top-right --> 
   <div id="maskBottomLeft"></div> <!-- child 3 for mask border on bottom-left --> 
   <div id="maskBottomRight"></div> <!-- child 4 for mask border on bottom-right --> 
</div>
</li>
</ul>

css

#main { width:100%; margin:10px; }

.list {
margin: 0px;
padding: 0px;
list-style-type: none;
position: relative;
}
.list li {
  float:left;
  margin-right: -0.5px;
  margin-top: -0.5px;
}
.list li:first-child #holder {
  border-right: 0.5px solid #000;
}
.list li:last-child #holder {
  border-left: 0.5px solid #000;
}
#holder {
    border: 1px solid #000;
    height: 250px;
    width: 200px;
    position:relative;
}

#maskTopLeft {
    position: absolute;
    top:-1px;
    left:-1px;
    width:21px;
    height:20px;
    background-color:#fff;
}

#maskTopRight {
    position: absolute;
    top:-1px;
    left:180px;
    width:21px;
    height:20px;
    background-color:#fff;
}

#maskBottomRight {
    position: absolute;
    top:230px;
    left:180px;
    width:21px;
    height:21px;
    background-color:#fff;
}

#maskBottomLeft {
    position: absolute;
    top:230px;
    left:-1px;
    width:21px;
    height:21px;
    background-color:#fff;
}

demo on cssdeck

Upvotes: 0

user2397942
user2397942

Reputation: 27

img { 
    border:solid rgb(165, 162, 162)
    border-top:none;
    }

Upvotes: 0

matthias
matthias

Reputation: 111

set a backgroud image to the div-container where the images is in it. this background image is white and has the to borders (right side, bottom side) as you want. i think that's the solution for your problem, because otherwise the borders will look different

Upvotes: -1

ralph.m
ralph.m

Reputation: 14345

It's not easy to do borders like that just by using CSS border properties. You'd have to resort to some kind of trickery to cover over the borders at each corner.

You are better off using a background image for this task. Prepare an image with the right and bottom lines and place it on the background of those rectangles, positioned bottom right on each one. (Obviously you'd prepare the background image so that those gray lines don't meet at the bottom right corner—just as in the image you posted.)

This is assuming that you have a fair idea of the width and height of the elements, so it's not a perfect solution, but will get you pretty close.

Upvotes: 1

Related Questions