How do I add a curved border to different sections of my HTML?
<p>I'm learning uikit and trying to add curved borders to different sections of my page, but I can't figure it out. </p>

<p>The example I'm trying to follow looks like this, which is how I'd like it to look:</p>

<p><a href="https://i.stack.imgur.com/OQ7BM.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OQ7BM.jpg" alt="enter image description here"></a></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>header{background-color:#000000;width:100%;height:200px;font-size:100px;text-align:center;}
nav{background-color:#000000;width:20%;height:1300px;float:left;font-size:20px;text-align:center;color:#FFFFFF;}
section {background-color:#CCCC99; width:80%;height:1300px;float:left;font-size:20px;text-align:center;}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt; 
&lt;html&gt; 
&lt;head&gt; 
&lt;meta charset="utf-8" /&gt; 
  &lt;title&gt;4WAP - Exercise1&lt;/title&gt; 
  &lt;link rel="stylesheet" href="css/uikit.css" /&gt; 
  &lt;link rel="stylesheet" type="text/css" href="css/mystyles.css" /&gt;
  &lt;script src="jquery/jquery-3.1.0.js"&gt;&lt;/script&gt; 
  &lt;script src="js/uikit.min.js"&gt;&lt;/script&gt; 
 &lt;/head&gt; 
 &lt;body&gt; 
 &lt;header&gt;&lt;/header&gt; 
  &lt;nav&gt; 
 &lt;div class="uk-panel uk-panel-box"&gt;
 &lt;h3 class="uk-panel-title"&gt;This is the Main Menu&lt;/h3&gt;
 &lt;ul class="uk-nav uk-nav-side uk-nav-parent-icon" data-uk-nav&gt; &lt;!--main menu start--&gt; 
 &lt;li class="uk-parent"&gt;&lt;a href="#"&gt;Main Option One - Click Me To See More or Less&lt;/a&gt;
 &lt;ul class="uk-nav-sub"&gt;
 &lt;li&gt;&lt;a href="#"&gt;More One&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;More Two&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Main Option Two&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Main Option Three&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;&lt;/div&gt;
 &lt;/nav&gt;
 &lt;section&gt;&lt;/section&gt;
 &lt;/body&gt; 
&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>Can you guys give me a hand? Thanks in advance</p>