# Adding rounded corners to shapes (rectangle, triangle, etc.)

**URL:** https://discourse.processing.org/t/adding-rounded-corners-to-shapes-rectangle-triangle-etc/42423
**Category:** Beginners
**Created:** [July 15, 2023, 4:38am UTC](https://discourse.processing.org/t/adding-rounded-corners-to-shapes-rectangle-triangle-etc/42423 "2023-07-15T04:38:06Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![Janoer](https://avatars.discourse-cdn.com/v4/letter/j/34f0e0/32.png) [@Janoer](https://discourse.processing.org/u/Janoer)
#### Post date: [July 15, 2023, 4:38am UTC](https://discourse.processing.org/t/adding-rounded-corners-to-shapes-rectangle-triangle-etc/42423/1 "2023-07-15T04:38:06Z")

</div>

hello, is it possible if a shape like a rectangle, triangle etc is curved at each end like this?  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/4/5/458173d8d3e0bcb08e9e0c5cc33ce222b723a482.png)

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [July 15, 2023, 8:25am UTC](https://discourse.processing.org/t/adding-rounded-corners-to-shapes-rectangle-triangle-etc/42423/2 "2023-07-15T08:25:47Z")

</div>

Look at the rect command with 5 parameters

See reference

---

<div class="post-metadata">

### Author: ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)
#### Post date: [July 15, 2023, 10:01am UTC](https://discourse.processing.org/t/adding-rounded-corners-to-shapes-rectangle-triangle-etc/42423/3 "2023-07-15T10:01:17Z")

</div>

Hi

> **[rect() / Reference](https://processing.org/reference/rect_.html)**
>
> Draws a rectangle to the screen. A rectangle is a four-sided shape with every angle at ninety degrees. By default, the first two parameters set the location of the upper-left corner, the third sets th…

---

<div class="post-metadata">

### Author: ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)
#### Post date: [July 15, 2023, 12:19pm UTC](https://discourse.processing.org/t/adding-rounded-corners-to-shapes-rectangle-triangle-etc/42423/4 "2023-07-15T12:19:31Z")

</div>

Hello @Janoer,

> [@Janoer](#):
>
> hello, is it possible if a shape like a rectangle, triangle etc is curved at each end like this?

I encourage you to explore the resources (references, examples, tutorials) here:

> **[Welcome to Processing!](https://processing.org/)**
>
> Processing is a flexible software sketchbook and a language for learning how to code. Since 2001, Processing has promoted software literacy within the visual arts and visual literacy within technology…

You can also do a search within that site.

The _rect()_ method does this (rounded corners) with additional parameters.

I did not see this option to round corners with other shapes.

I often write custom code to meet my needs if I can’t find a solution

This is an example of adding a rounded corner using _bezier()_ function:

```auto
// Rounding Corner with bezier()
// Author: glv
// Date: 2023-07-15

size(300, 200);

background(0);
strokeWeight(2);

PVector o1, a1, c1, o2, a2, c2;

// First anchor and control point 
o1 = new PVector(10, 10); // origin of line
a1 = new PVector(50, 50);
c1 = new PVector(100, 100);

stroke(0, 255, 0); // red
line(o1.x, o1.y, a1.x, a1.y);
stroke(255, 0, 0); // green
line(a1.x, a1.y, c1.x, c1.y);

// Second anchor and control Point
o2 = new PVector(220, 10); // origin of line
a2 = new PVector(180, 50);
c2 = new PVector(130, 100);

stroke(0, 255, 0); // green
line(o2.x, o2.y, a2.x, a2.y);
stroke(255, 0, 0); // red
line(a2.x, a2.y, c2.x, c2.y);

//bezier(x1, y1, x2, y2, x3, y3, x4, y4) // See reference!
//bezier(a1.x, a1.y, c1.x, c1.y, c2.x, c2.y, a2.x, a2.y) // Mapped from reference

noFill();
stroke(255, 255, 0); // yellow
bezier(a1.x, a1.y, c1.x, c1.y, c2.x, c2.y, a2.x, a2.y);

```

I start with an idea such as the above and integrate it into more complex code.

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/7/6/768803a5428524fd0b25127353f746bbebeab365.png)

There are certainly many solutions to this for polygons.

`:)`
