How to Create Stylish Shape Borders in CSS

Today we are going to see examples How to Create Stylish Shape Borders in CSS. But these examples will not work in Netscape 4 or WebTV, because they do not allow you to define individual borders, or Escape because it does not handle borders correctly. Internet explorer 4 and 5 may have trouble with some of the examples due to their problems with the box model.

 
Thick borders

A div element with a border

 

If all four borders are defined as being thick, they should be tapered into each other:

1
2
3
4

  border-top: 20px solid red;
  border-bottom: 20px solid #fc0;
  border-left: 20px solid blue;
  border-right: 20px solid green;

 
MultiColor Square

All of these examples are done using a DIV element, with no contents:

1

  <div style="style declarations"></div>

The lack of contents makes all points sharp. Some browsers still leave space for the non-existent contents, so we can remove that space by using the following combination of styles:

1
2
3
4
5

  font-size: 0px; line-height: 0%; width: 0px;
  border-top: 20px solid red;
  border-bottom: 20px solid #fc0;
  border-left: 20px solid blue;
  border-right: 20px solid green;

 
Right Side of MultiColour Square

If we do not define a border, the other borders stop abruptly, and do not taper into the space that would be used by that border:

1
2
3
4
5

  font-size: 0px; line-height: 0%; width: 0px;
  border-top: 20px solid red;
  border-bottom: 20px solid #fc0;
  border-left: none;
  border-right: 20px solid green;

 
Top-Right Corner Side of Multicolor Square

We get a similar effect by removing two borders:

1
2
3
4

  font-size: 0px; line-height: 0%; width: 0px;
  border-top: 20px solid red;
  border-bottom: none;
  border-right: 20px solid green;

 
Top-Right Corner Side of Multicolor Square

By making one of the two remaining borders the same color as the background, we are left with a sloping triangle:

1
2
3

  font-size: 0px; line-height: 0%; width: 0px;
  border-top: 20px solid red;
  border-right: 20px solid #f6f6f6;

Increasing the width makes a longer bar - Note, Microsoft Internet Explorer 4 and 5 take the width as being the full length, including the sloping part, so they cannot display this example. Other browsers take the width as excluding the border, so not the sloping part:

1
2
3

 font-size: 0px; line-height: 0%; width: 100px;
  border-top: 20px solid red;
  border-right: 20px solid #f6f6f6;

 
Right Side of Multicolor Square With Right Border Thicker

If we increase the width of the side border, we get a sharper triangle, which is made sharper by being longer:

1
2
3
4

  font-size: 0px; line-height: 0%; width: 0px;
  border-top: 20px solid red;
  border-bottom: 20px solid #fc0;
  border-right: 40px solid green;

 
Right Side of Multicolor Square With Right Border Thicker And Top And Bottom Borders Thinner

If we decrease the size of the top and bottom borders, we can make the triangle even narrower and sharper:

1
2
3
4

  font-size: 0px; line-height: 0%; width: 0px;
  border-top: 10px solid red;
  border-bottom: 10px solid #fc0;
  border-right: 40px solid green;

I hope you enjoyed alot :)