# Bounding Box (Rectangle) Tool

## What is Bounding Box Annotation Tool?

The[ Bounding Box](https://supervisely.com/blog/bounding-box-annotation-for-object-detection/#what-is-object-detection) is a fundamental tool in Computer Vision used for image annotation, object detection and tracking tasks.

Rectangles that precisely enclose an object are commonly referred to as bounding boxes. These boxes are defined by coordinates that indicate the position and size of the object. Coordinates are usually specified as the top-left and bottom-right corners (or alternatively, by the center point, width, and height).

The main goal of a bounding box is to provide a clear boundary that the machine learning model can use to identify and locate objects in images or videos.

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M4BHwRbuyIoH-xoF3Gv%2Fuploads%2F0FkPa5ebrnu7Ctd88GGn%2Feasy-clicks.mp4?alt=media&token=d099e097-18be-4a10-a1bb-10c315ca7ecd&autoplay=1&loop=1>" %}

## Video Tutorial

Watch our 5-minute video tutorial that provides clear and simple instructions on how to create and use Bounding Boxes for image annotation in Supervisely Image Labeling Toolbox.

{% embed url="<https://youtu.be/X2qbm0FxN_4?si=AEONjOp4fhJmTzY6>" %}

## How to use the Bounding Box

We'll explore how to create and manually apply bounding boxes, including advanced features and tips for efficient and accurate labeling.

### Create class with Bounding Box shape

You can create a new class directly from the [Annotation Toolbox](https://app.supervisely.com/ecosystem/annotation_tools/image-labeling-tool-v2?). To do this:

1. Click the **Rectangle Icon** in the toolbar of the labeling interface.
2. **Or** select an existing object class or add a new class by clicking **Add new class definition**.
3. In the modal window, enter the class name, choose the Bounding Box or Any shape, and configure additional settings (e.g., color, hotkeys).
4. Click the `Create` button to add the new class to the definitions list.
5. Select the newly created class and put a bounding box around the object in the image or video.

<figure><img src="https://1080806899-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M4BHwRbuyIoH-xoF3Gv%2Fuploads%2FKoJdvmZcVux5KECnl0If%2Fcreate-bbox.png?alt=media&#x26;token=9d3040e6-dd99-45c0-a3bd-d70818fadd71" alt=""><figcaption></figcaption></figure>

### Manual Annotation Guide

1. Select the object of interest in the image or video and place a rectangle around it.
2. Click to set the first point (top-left corner), then drag the rectangle to the bottom-right corner.
3. To edit the bounding box, drag its edges or use hotkeys for precise positioning.
4. You can quickly move to the next object without pressing the SPACE bar to finish annotating the previous object; just set new points.

{% hint style="info" %}
Always aim to create bounding boxes that tightly fit around the object to minimize background noise and enhance model performance.
{% endhint %}

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M4BHwRbuyIoH-xoF3Gv%2Fuploads%2FGURMVPQngvBGJWzqq8vo%2Fbbox-place.mp4?alt=media&token=68bfb6b8-1249-440e-8662-df43a2ea90d2&autoplay=1&loop=1>" %}

### Pro Tips

* Use **Auto-select** to switch between classes by hovering over the desired object. Also easily edit existing bounding boxes, including those predicted by Neural Networks.
* Use the **Object Color Randomizer** to instantly change the color of any object with a single click, as often as you like. This is particularly useful if you have many objects of the same class, or if they are close together, so you can easily differentiate between bounding boxes.

<figure><img src="https://1080806899-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M4BHwRbuyIoH-xoF3Gv%2Fuploads%2F3Y7Ua6eg36WELG3Q333l%2Fbbox-labeling.png?alt=media&#x26;token=6616ef19-ed19-422f-83f4-809b9719f42e" alt=""><figcaption></figcaption></figure>

### Editing modes

The Bounding Box Tool supports two editing modes:

**1. Corner Drag Mode (Default):**

* This is the standard editing behavior.
* Dragging a side adjusts the rectangle along that axis.
* Dragging a corner adjusts both width and height simultaneously in the dragged direction.
* The rectangle expands or contracts from the side or corner being manipulated.

<figure><img src="https://1080806899-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M4BHwRbuyIoH-xoF3Gv%2Fuploads%2Fgit-blob-e26408c1433b328b56bfbeda5606922e2fa59313%2Fbbox-drag-mode.jpg?alt=media" alt=""><figcaption></figcaption></figure>

**2. Center Out Mode:**

* In this mode, the rectangle is resized relative to its center point.
* Dragging any side or corner scales the rectangle uniformly from the center.
* The center point remains fixed.

<figure><img src="https://1080806899-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M4BHwRbuyIoH-xoF3Gv%2Fuploads%2Fgit-blob-bb9fe81fd5bc5fe7c68e4fa29740c726002febd2%2Fbbox-dragmode-center.jpg?alt=media" alt=""><figcaption></figcaption></figure>

## Hotkeys

Control the BBox tool more efficiently with `HOTKEYS`.

<table data-full-width="false"><thead><tr><th width="454">Bounding Box (Rectangle) Tool</th><th>5</th></tr></thead><tbody><tr><td>Create &#x26; add point</td><td><img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDIwMDEwOTA0Ly9FTiIKICJodHRwOi8vd3d3LnczLm9yZy9UUi8yMDAxL1JFQy1TVkctMjAwMTA5MDQvRFREL3N2ZzEwLmR0ZCI+CjxzdmcgdmVyc2lvbj0iMS4wIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiB3aWR0aD0iMTAwLjAwMDAwMHB0IiBoZWlnaHQ9IjEwMC4wMDAwMDBwdCIgdmlld0JveD0iMCAwIDEwMC4wMDAwMDAgMTAwLjAwMDAwMCIKIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIG1lZXQiPgoKPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wMDAwMDAsMTAwLjAwMDAwMCkgc2NhbGUoMC4xMDAwMDAsLTAuMTAwMDAwKSIgc3Ryb2tlPSJub25lIj4KPHBhdGggZD0iTTQzMiA5MTAgYy0xMDUgLTIyIC0yMDQgLTEwNyAtMjQyIC0yMDYgLTI5IC04MCAtMjkgLTMyOCAwIC00MDggMjkKLTc2IDg4IC0xMzkgMTY2IC0xNzcgNTcgLTI4IDc2IC0zMyAxNDQgLTMzIDY4IDAgODcgNSAxNDQgMzMgNzggMzggMTM3IDEwMQoxNjYgMTc3IDI5IDgwIDI5IDMyOCAwIDQwOCAtNTUgMTQ1IC0yMjQgMjM4IC0zNzggMjA2eiBtMTc0IC0xMDEgYzYzIC0yMyAxMjgKLTExMCAxNDAgLTE4OCBsNyAtNDEgLTEwNyAwIC0xMDYgMCAwIDEyNiAwIDEyNSAyMyAtNyBjMTIgLTQgMzIgLTEwIDQzIC0xNXoKbTE0MiAtMzg2IGMtNiAtOTQgLTI5IC0xNDUgLTkwIC0xOTcgLTg5IC03NyAtMjI3IC03NyAtMzE2IDAgLTYxIDUyIC04NCAxMDMKLTkwIDE5NyBsLTUgNzcgMjUzIDAgMjUzIDAgLTUgLTc3eiIvPgo8L2c+Cjwvc3ZnPgo=" alt="" data-size="line">, <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDIwMDEwOTA0Ly9FTiIKICJodHRwOi8vd3d3LnczLm9yZy9UUi8yMDAxL1JFQy1TVkctMjAwMTA5MDQvRFREL3N2ZzEwLmR0ZCI+CjxzdmcgdmVyc2lvbj0iMS4wIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiB3aWR0aD0iMTAwLjAwMDAwMHB0IiBoZWlnaHQ9IjEwMC4wMDAwMDBwdCIgdmlld0JveD0iMCAwIDEwMC4wMDAwMDAgMTAwLjAwMDAwMCIKIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIG1lZXQiPgoKPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wMDAwMDAsMTAwLjAwMDAwMCkgc2NhbGUoMC4xMDAwMDAsLTAuMTAwMDAwKSIgc3Ryb2tlPSJub25lIj4KPHBhdGggZD0iTTQzMiA5MTAgYy0xMDUgLTIyIC0yMDQgLTEwNyAtMjQyIC0yMDYgLTI5IC04MCAtMjkgLTMyOCAwIC00MDggMjkKLTc2IDg4IC0xMzkgMTY2IC0xNzcgNTcgLTI4IDc2IC0zMyAxNDQgLTMzIDY4IDAgODcgNSAxNDQgMzMgNzggMzggMTM3IDEwMQoxNjYgMTc3IDI5IDgwIDI5IDMyOCAwIDQwOCAtNTUgMTQ1IC0yMjQgMjM4IC0zNzggMjA2eiBtMTc0IC0xMDEgYzYzIC0yMyAxMjgKLTExMCAxNDAgLTE4OCBsNyAtNDEgLTEwNyAwIC0xMDYgMCAwIDEyNiAwIDEyNSAyMyAtNyBjMTIgLTQgMzIgLTEwIDQzIC0xNXoKbTE0MiAtMzg2IGMtNiAtOTQgLTI5IC0xNDUgLTkwIC0xOTcgLTg5IC03NyAtMjI3IC03NyAtMzE2IDAgLTYxIDUyIC04NCAxMDMKLTkwIDE5NyBsLTUgNzcgMjUzIDAgMjUzIDAgLTUgLTc3eiIvPgo8L2c+Cjwvc3ZnPgo=" alt="" data-size="line"></td></tr><tr><td>Edit point</td><td>Drag</td></tr><tr><td>Drag bounding box</td><td>Alt + Hold <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDIwMDEwOTA0Ly9FTiIKICJodHRwOi8vd3d3LnczLm9yZy9UUi8yMDAxL1JFQy1TVkctMjAwMTA5MDQvRFREL3N2ZzEwLmR0ZCI+CjxzdmcgdmVyc2lvbj0iMS4wIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiB3aWR0aD0iMTAwLjAwMDAwMHB0IiBoZWlnaHQ9IjEwMC4wMDAwMDBwdCIgdmlld0JveD0iMCAwIDEwMC4wMDAwMDAgMTAwLjAwMDAwMCIKIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIG1lZXQiPgoKPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wMDAwMDAsMTAwLjAwMDAwMCkgc2NhbGUoMC4xMDAwMDAsLTAuMTAwMDAwKSIgc3Ryb2tlPSJub25lIj4KPHBhdGggZD0iTTQzMiA5MTAgYy0xMDUgLTIyIC0yMDQgLTEwNyAtMjQyIC0yMDYgLTI5IC04MCAtMjkgLTMyOCAwIC00MDggMjkKLTc2IDg4IC0xMzkgMTY2IC0xNzcgNTcgLTI4IDc2IC0zMyAxNDQgLTMzIDY4IDAgODcgNSAxNDQgMzMgNzggMzggMTM3IDEwMQoxNjYgMTc3IDI5IDgwIDI5IDMyOCAwIDQwOCAtNTUgMTQ1IC0yMjQgMjM4IC0zNzggMjA2eiBtMTc0IC0xMDEgYzYzIC0yMyAxMjgKLTExMCAxNDAgLTE4OCBsNyAtNDEgLTEwNyAwIC0xMDYgMCAwIDEyNiAwIDEyNSAyMyAtNyBjMTIgLTQgMzIgLTEwIDQzIC0xNXoKbTE0MiAtMzg2IGMtNiAtOTQgLTI5IC0xNDUgLTkwIC0xOTcgLTg5IC03NyAtMjI3IC03NyAtMzE2IDAgLTYxIDUyIC04NCAxMDMKLTkwIDE5NyBsLTUgNzcgMjUzIDAgMjUzIDAgLTUgLTc3eiIvPgo8L2c+Cjwvc3ZnPgo=" alt="" data-size="line"></td></tr><tr><td>Drag bounding box</td><td>Alt + Arrow Keys</td></tr><tr><td>Switch between drag modes<br>(Corner Drag ⇄ Center-Out)</td><td>Hold Control or Ctrl</td></tr><tr><td><strong>You can create new bounding box immediately after.</strong></td><td></td></tr></tbody></table>

| Scene Navigation                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Zoom with `Mouse wheel`. Hold <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDIwMDEwOTA0Ly9FTiIKICJodHRwOi8vd3d3LnczLm9yZy9UUi8yMDAxL1JFQy1TVkctMjAwMTA5MDQvRFREL3N2ZzEwLmR0ZCI+CjxzdmcgdmVyc2lvbj0iMS4wIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiB3aWR0aD0iMTAwLjAwMDAwMHB0IiBoZWlnaHQ9IjEwMC4wMDAwMDBwdCIgdmlld0JveD0iMCAwIDEwMC4wMDAwMDAgMTAwLjAwMDAwMCIKIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIG1lZXQiPgoKPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wMDAwMDAsMTAwLjAwMDAwMCkgc2NhbGUoMC4xMDAwMDAsLTAuMTAwMDAwKSIgc3Ryb2tlPSJub25lIj4KPHBhdGggZD0iTTQzMiA5MTAgYy0xMDUgLTIyIC0yMDQgLTEwNyAtMjQyIC0yMDYgLTI5IC04MCAtMjkgLTMyOCAwIC00MDggMjkKLTc2IDg4IC0xMzkgMTY2IC0xNzcgNTcgLTI4IDc2IC0zMyAxNDQgLTMzIDY4IDAgODcgNSAxNDQgMzMgNzggMzggMTM3IDEwMQoxNjYgMTc3IDI5IDgwIDI5IDMyOCAwIDQwOCAtNTUgMTQ1IC0yMjQgMjM4IC0zNzggMjA2eiBtMjggLTIwNSBsMCAtMTI1IC0xMDYKMCAtMTA3IDAgNyA0MSBjOSA1OSA0MCAxMTMgODUgMTUwIDMzIDI4IDg2IDU1IDExNCA1OCA0IDEgNyAtNTUgNyAtMTI0eiBtMjg4Ci0yODIgYy02IC05NCAtMjkgLTE0NSAtOTAgLTE5NyAtODkgLTc3IC0yMjcgLTc3IC0zMTYgMCAtNjEgNTIgLTg0IDEwMyAtOTAKMTk3IGwtNSA3NyAyNTMgMCAyNTMgMCAtNSAtNzd6Ii8+CjwvZz4KPC9zdmc+Cg==" alt="" data-size="line"> to move scene. |

***

## Integrating Bounding Boxes with Semi-Automated and Automated Tools

Bounding boxes can be seamlessly combined with both semi-automated and fully automated object detection tools to improve and speed up your image annotation.

### **Semi-Automated Object Detection with OWL-ViT**

[OWL-ViT](https://ecosystem.supervisely.com/apps/serve-owl-vit?utm_source=blog) (Vision Transformer for Open-World Localization) uses bounding boxes as a reference to improve object detection. Here's how it works:

* **Reference Image Mode**: Annotate an object with a bounding box in a reference image, and OWL-ViT will use this to identify similar objects in other images.
* **Text Prompt Mode**: Define objects using text descriptions, and OWL-ViT will detect these objects across your dataset.

### **Automated Pre-Labeling with YOLOv8**

[YOLOv8](https://ecosystem.supervisely.com/apps/yolov8/serve?utm_source=blog) offers a fully automated approach to object detection. It uses bounding boxes to quickly and accurately label objects in large datasets:

* **Automatic Detection**: YOLOv8 generates bounding boxes around objects without the need for manual input.
* **Batch Processing**: Apply the model to all images in a project for efficient pre-labeling.

For more information on using bounding boxes with [OWL-ViT](https://ecosystem.supervisely.com/apps/serve-owl-vit?utm_source=blog) and [YOLOv8](https://ecosystem.supervisely.com/apps/yolov8/serve?utm_source=blog) models, check out our [**comprehensive Bounding Box guide.**](https://supervisely.com/blog/bounding-box-annotation-for-object-detection/#what-is-object-detection)

{% embed url="<https://supervisely.com/blog/bounding-box-annotation-for-object-detection/#what-is-object-detection>" %}
