title: How to make the top-border of a double-border styled element invisible using FullCalendar's styling
body: <pre><code>      isRTL: false,
          firstDay: 1,
          monthNames: ['Januari','Februari','Maart','April','Mei','Juni','Juli','Augustus','September','Oktober','November','December'],
          monthNamesShort: ['Januari','Februari','Maart','April','Mei','Juni','Juli','Augustus','September','Oktober','November','December'], 
          dayNames: ['Zondag','Maandag','Dinsdag','Woensdag','Donderdag','Vrijdag','Zaterdag',],
          dayNamesShort: ['Zondag','Maandag','Dinsdag','Woensdag','Donderdag','Vrijdag','Zaterdag'],        
          slotLabelFormat:'HH:mm',
          allDayText: 'Hele dag',
          // showNonCurrentDates: false,
          fixedWeekCount: false,
          buttonText: {
            prev: &quot;‹&quot;,
            next: &quot;›&quot;,
            prevYear: &quot;«&quot;,
            nextYear: &quot;»&quot;,
            today: 'Vandaag',
            month: 'Maand',
            week: 'Week',
            day: 'Dag'
          },
     });
    });
  
  
     
    &lt;/script&gt;
  </code></pre>
  <pre><code>  &lt;style type=&quot;text/css&quot;&gt;
      .fc-body{
        cursor: pointer;
      }
      .fc-highlight{
        background: #71AFE5 !important;
      }
      .fc-day-number{
        float: left !important;
      }
      .fc-unthemed td.fc-today{
        background: none !important; 
      }
      .fc-past{
        background-color: #faf9f8;
        color: black !important;
      }
      .fc-row .fc-content-skeleton td, .fc-row .fc-helper-skeleton td{
        border-color: #ddd;
      }
      .fc-day-header{
        background: royalblue !important;
      }
      .fc td.fc-today{
        border-style: solid !important;
      }
  /*    .fc-day-top .fc-wed .fc-today .fc-state-highlight td{
        border-top-color: royalblue !important;
        border-top-width: 8px !important;
        position: absolute !important;
        width: 157px !important;
      }*/
      .fc-day-header span{
        color: white;
        font-weight: 300;
        font-size: 15px;
      }
      .fc-day-top{
        background-color: none !important;
        border-top-width: 0px !important;
        border-top-color: transparent !important;
      }
      .fc-today, .fc-state-highlight {
        border-top-color: royalblue !important;
        border-top-width: 5px !important;
        color: royalblue;
      }
  /*    .fc-day-header, .fc-widget-header, .fc-fri   {
        border-top-color: transparent !important;
        border-top-width: 1px !important;
        position: relative !important;
      }*/
    &lt;/style&gt;
  </code></pre>
  <p>I don't get how to turn the topside of it invisible without affecting any other elements. I've searched far and wide for other answers, but could not find a question similar to mine, especially regarding FC.</p>
  <p>Is there a way to get rid of the top-side of a double-border in a FullCalendar element? And if not, is there any actual alternative solution to this question?</p>
  <p>Thanks in advance.</p>
  <hr />
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// your js here and what's missing 
  
  /*      isRTL: false,
          firstDay: 1,
          monthNames: ['Januari','Februari','Maart','April','Mei','Juni','Juli','Augustus','September','Oktober','November','December'],
          monthNamesShort: ['Januari','Februari','Maart','April','Mei','Juni','Juli','Augustus','September','Oktober','November','December'], 
          dayNames: ['Zondag','Maandag','Dinsdag','Woensdag','Donderdag','Vrijdag','Zaterdag',],
          dayNamesShort: ['Zondag','Maandag','Dinsdag','Woensdag','Donderdag','Vrijdag','Zaterdag'],        
          slotLabelFormat:'HH:mm',
          allDayText: 'Hele dag',
          // showNonCurrentDates: false,
          fixedWeekCount: false,
          buttonText: {
            prev: "‹",
            next: "›",
            prevYear: "«",
            nextYear: "»",
            today: 'Vandaag',
            month: 'Maand',
            week: 'Week',
            day: 'Dag'
          },
     });
    });
    */</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.fc-body{
        cursor: pointer;
      }
      .fc-highlight{
        background: #71AFE5 !important;
      }
      .fc-day-number{
        float: left !important;
      }
      .fc-unthemed td.fc-today{
        background: none !important; 
      }
      .fc-past{
        background-color: #faf9f8;
        color: black !important;
      }
      .fc-row .fc-content-skeleton td, .fc-row .fc-helper-skeleton td{
        border-color: #ddd;
      }
      .fc-day-header{
        background: royalblue !important;
      }
      .fc td.fc-today{
        border-style: solid !important;
      }
  /*    .fc-day-top .fc-wed .fc-today .fc-state-highlight td{
        border-top-color: royalblue !important;
        border-top-width: 8px !important;
        position: absolute !important;
        width: 157px !important;
      }*/
      .fc-day-header span{
        color: white;
        font-weight: 300;
        font-size: 15px;
      }
      .fc-day-top{
        background-color: none !important;
        border-top-width: 0px !important;
        border-top-color: transparent !important;
      }
      .fc-today, .fc-state-highlight {
        border-top-color: royalblue !important;
        border-top-width: 5px !important;
        color: royalblue;
      }
  /*    .fc-day-header, .fc-widget-header, .fc-fri   {
        border-top-color: transparent !important;
        border-top-width: 1px !important;
        position: relative !important;
      }*/</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" &gt;
  &lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.5.1/main.css"&gt;
  &lt;link href='https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.13.1/css/all.css' rel='stylesheet'&gt;
  
  
  
  &lt;div id='calendar'&gt;&lt;/div&gt;
  
  
  
  
  
  &lt;script src="https://code.jquery.com/jquery.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.2/moment.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.5.1/main.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" &gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>