Borders are a fundamental part of the HTML box model. In this article, we will explore some tips and tricks to achieve different shapes and effects by styling borders. These are extremely useful for creating interesting designs and solving CSS Battle challenges.

0. Setup

Below is a basic example of a div with a border. We will use this div to demonstrate the different border tricks. The .example class applies to all of the example divs in this article.

Since all of the examples are part of the actual HTML content, you can inspect each of the elements to see the applied styles.

.example {
  width: 10rem;
  aspect-ratio: 2/1;
  border-width: 5px;
  border-color: black;
  border-style: solid;
  display: grid;
  place-content: center;
  position: relative;
  margin: 2rem auto;
  text-wrap: nowrap;
}

.example-1 {
  border: 5px solid black;
}

1. The Circle of Life ⭕️

You can create a circle in CSS by setting the border-radius property to 50%. If the element has the same height and width, this will make the element a perfect circle.

.example-2 {
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: black;
  color: white;
}

For a hollow circle, you can keep the background color transparent and set a border. Changing the width and height will change the size of the circle while changing the border width will change the thickness.

.example-3 {
  aspect-ratio: 1;
  border-radius: 50%;
}

2. The Eye of the Tiger 🐯

Now that we’ve set the border-radius property to 50%, we can create a circle. But what if we want to create an ellipse? The two main types of ellipses we can make are an oval shape with rounded ends and an ellipse with pointed ends.

For the rounded ellipse, we can still use border radius 50%, but we need to set the width and height to different values. Here are some examples of a vertical and a horizontal oval:

.example-4 {
  border-radius: 50%;
}

Earlier, I mentioned that we can target individual borders. We can also target the border corners individually. So, to make ellipse with pointed ends, we need to use some trickery with rotation. First, we create a square, then we rotate it 45 degrees. This will make the square look like a diamond.

.example-5 {
  aspect-ratio: 1;
  rotate: 45deg;
}

This is where the magic happens. We set the border-radius property to 50%, but for only two of the corners. This will make the diamond look like an ellipse with pointed ends.

.example-6 {
  aspect-ratio: 1;
  border-radius: 50% 0 50% 0;
  rotate: 45deg;
}

We can also make a sort of “S” shape by setting different width and height values and using the same rotation and border-radius trick.

.example-7 {
  border-radius: 0 50% 0 50%;
  rotate: -45deg;
  margin-block: 2rem;
}

3. The Blue and Red Pill 💊

To make a pill shape, we need to set the border-radius to a really large number. In Kevin Powell’s videos, he tends to use 100vw but you can use any large number. I usually use 1000px but it really doesn’t matter.

.example-8,
.example-9 {
  border-radius: 1000px;
}

4. It’s a Trap(ezoid)! 🦑

If you go back to the example where we color individual borders, you can see that the borders create a trapezoid shape.

To make a trapezoid, we need an element with no background color. Then we can set the height to 0 and then add a width. Then set the border-color of all sides except one to transparent. This will create a trapezoid shape.

.example-10 {
  border-color: transparent transparent black transparent;
  height: 0px;
  border-width: 30px;
}

Border Example #10

You can manipulate the “height” of the trapezoid by changing the border-width values. For example, if you set the border-width to 0 50px 100px 50px, you will get a trapezoid with a smaller top border.

.example-11 {
  border-color: red;
  border-bottom-color: black;
  height: 0px;
  border-top-width: 30px;
  border-bottom-width: 60px;
  border-inline-width: 10px;
}

Border Example #11

Alternatively, the width of the trapezoid can be manipulated by changing the width value of the element. For example, if you set the width to 100px, you will get a trapezoid with a smaller width.

.example-12 {
  border-color: red;
  border-bottom-color: black;
  height: 0px;
  border-width: 30px;
  width: 6rem;
}

.bigger-trapezoid {
  width: 300px;
  height: 0;
  border-width: 0 50px 100px 50px;
  border-style: solid;
  border-color: transparent transparent red transparent;
}

Border Example #12

5. The Pyramid of Doom ⚠️

Finally, we can make a triangle using a similar method to the trapezoid. We set the height to 0 but we also set the width to 0. This essentially causes the smaller end of the trapezoid to converge to a single point, making a triangle.

.example-13 {
  width: 0;
  border-color: red;
  border-bottom-color: black;
  height: 0px;
  border-width: 30px;
}

Border Example #13

You can achieve a similar effect with the trapezoid by setting the border-width of the left and right borders to a large number.

.example-14 {
  border-color: red;
  border-bottom-color: black;
  height: 0px;
  border-width: 30px;
  border-inline-width: 100px;
  width: 6rem;
}

Border Example #14

6. Bonus

Here are 8 more examples of border-radius tricks that you can use to create interesting shapes.

Conclusion

For examples on all of these border radius tricks, check out this CodePen that I made for this article: