CODEWITHSUNDEEP
htmlcss
Ras
Ras

Reputation: 89

How to fix html border corner slope with css?

You can access following code via this link : jsfiddle.net/2NPxV

My css code :

.custom_content { 
display: block; 
width:200px;
height: 30px; 
margin: 5px 0; 
padding: 0 0;   
border: 1px solid #000000;  }  

.left-border-red
{
border-left: 5px solid red;
}

My html code :

<div class="container">
<div class="row custom_content left-border-red">
My content  
</div>  
</div>

Result : Please zoom in to image to see top left and bottom left slope areas on rectangle. http://rasih.net/se/main.png

Problem 1 : Top left corner has slope. I want to fix it.

Problem 2 : Bottom left corner has slope. I want to fix it.

Summary : How can i fix top left and bottom left slope for my output ? I want to keep outer black border and inner red border same time. But i dont want any slope for any corner.

Upvotes: 0

Views: 1341

Answers (2)

user2012084
user2012084

Reputation:

Here, check out this Fiddle: http://jsfiddle.net/DX7w8/1/

The only change I made was instead of using the border-left property, which causes only that specific segment of the square to be adjusted, I used the box-shadow property and manipulated the position such that it appeared to have a red left border, which fills the left side.

I also increased the padding-left to 6px so that the text didn't appear to overlap the border.

It's superior because I'm assuming you don't want a black left line showing before your red border. This is the best way to avoid that.

Hope this helps.

Upvotes: 1

Valentin
Valentin

Reputation: 2858

instead of border-left you could use the :before or :after pseudo elements and style that to look how you want

.left-border-red:before {
  content:'';
  border-left: 5px solid red;
  height: 100%;
  width: 0;
  display: block;
  float:left;
}

http://jsfiddle.net/valentin/2NPxV/1/

Upvotes: 0

Related Questions