Rounded edges of 3d cube <p>I have created a 3D cube. I want the edges of the cube to be smooth and curved - not sharp.</p> <p><strong>HTML</strong></p> <pre><code>&lt;div class="wrap"&gt; &lt;div class="cube"&gt; &lt;div class="front"&gt;front&lt;/div&gt; &lt;div class="back"&gt;back&lt;/div&gt; &lt;div class="top"&gt;top&lt;/div&gt; &lt;div class="bottom"&gt;bottom&lt;/div&gt; &lt;div class="left"&gt;left&lt;/div&gt; &lt;div class="right"&gt;right&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p><strong>CSS</strong></p> <pre><code>.wrap { perspective: 800px; perspective-origin: 50% 100px; } .cube { position: relative; width: 200px; transform-style: preserve-3d; } .cube div { position: absolute; width: 200px; height: 200px; background: #aaa; } .back { transform: translateZ(-100px) rotateY(180deg); } .right { transform: rotateY(-270deg) translateX(100px); transform-origin: top right; } .left { transform: rotateY(270deg) translateX(-100px); transform-origin: center left; } .top { transform: rotateX(-90deg) translateY(-100px); transform-origin: top center; } .bottom { transform: rotateX(90deg) translateY(100px); transform-origin: bottom center; } .front { transform: translateZ(100px); } @keyframes spin { from { transform: rotateY(0); } to { transform: rotateY(360deg); }; } </code></pre> <p>For animating the cube .cube { animation: spin 5s infinite linear; }</p> <p>Please help me in solving this problem.</p>