Skip to content
An A-Frame component to create rectangles with smooth edges.
JavaScript HTML
Branch: master
Clone or download
Pull request Compare This branch is even with etiennepinchon:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

A-Frame Rounded Primitive/Component

Rounded Primitive/Component for A-Frame to get a rectangle with rounded edges. This is great if you need to get smooth edges in your VR UIs.

Note: If you need more control you can check but the corners will be pixelated (that is why I wanted to use another method to create smooth edges).


Alt text

Live demo

Getting Started

<a-rounded position="0 1.2 -5" width="4" height="3.1" radius="0.05"></a-rounded>


Name Description Type Default
width Width of the container number 1
height Height of the container number 1
radius Border radius of the container number 0.3
top-left-radius Border radius of the container number -1 (inherit)
top-right-radius Border radius of the container number -1 (inherit)
bottom-left-radius Border radius of the container number -1 (inherit)
bottom-right-radius Border radius of the container number -1 (inherit)
color Color of the container. color "#F0F0F0"
opacity Opacity of the container opacity 1

Want to make some changes to it?


First make sure you have Node installed.

On Mac OS X, it's recommended to use Homebrew to install Node + npm:

brew install node

To install the Node dependencies:

npm install

Local Development

To serve the site from a simple Node development server:

npm start

Then launch the site from your favourite browser:


If you wish to serve the site from a different port:

PORT=8000 npm start


Distributed under an MIT License.

You can’t perform that action at this time.