CODEWITHSUNDEEP
javascriptcsshtmlstyles
Filling The Stack is What I DO
Filling The Stack is What I DO

Reputation: 6741

How to display square divs with-out the mitered corner look

I've got this paint brush feature for the users to be able to paint different pieces of the aluminum the colors they choose. If you'll notice in the snap shot below the corners look mitered and or they seem as if they've go a 45 degree angle.

Is there as way to make all the corners look square and not mitered?

I'm going to start using the canvas in phase two of this program so it want matter then but now it would be nice to be able to square the corners.

Any suggestions?

Paint brush

Paint brush close up

Upvotes: 1

Views: 471

Answers (1)

Reactgular
Reactgular

Reputation: 54811

CSS borders that are collapsed are rendered by the browser using a mitered shape. This feature can be useful in rendering triangles and arrows. Just google css triangle trick for examples.

It's not possible to create a sharp corner for a border made up of two different colors. The solution is to use two nested elements to render different parts of the border.

You can see a working example here

http://jsfiddle.net/thinkingmedia/xApHM/

It works like this:

<div class="row after">
    <div class="target"><div></div></div>
    <div class="target selected"><div></div></div>
    <div class="target"><div></div></div>
</div>

.target has a border on the top/bottom but not it's sides. Each .target has a child <div> that is used to render the sides for the borders. Since they are disconnected elements their borders are rendered separately by the browsers. Since borders are collapsed they appear as one border.

Upvotes: 2

Related Questions