diff --git a/.bobconfigrc b/.bobconfigrc
index 7c11e6d8a..10f37a0ed 100644
--- a/.bobconfigrc
+++ b/.bobconfigrc
@@ -9,5 +9,7 @@
     "examplesMediaDest": "./docs/media/",
     "fontsMediaDest": "./docs/media/fonts/",
     "metaGlob": "./live-examples/**/meta.json",
-    "pagesDir": "./docs/pages/"
+    "pagesDir": "./docs/pages/",
+    "editorHeights": "./editor-heights.json",
+    "heightData": "./docs/height-data.json"
 }
diff --git a/editor-heights.json b/editor-heights.json
new file mode 100644
index 000000000..3526bad79
--- /dev/null
+++ b/editor-heights.json
@@ -0,0 +1,134 @@
+{
+  "editors": [
+    {
+      "name": "css",
+      "heights": [
+        {
+          "minFrameWidth": 0,
+          "height": 675
+        },
+        {
+          "minFrameWidth": 590,
+          "height": 375
+        }
+      ]
+    },
+    {
+      "name": "js-taller",
+      "heights": [
+        {
+          "minFrameWidth": 0,
+          "height": 723
+        },
+        {
+          "minFrameWidth": 590,
+          "height": 654
+        }
+      ]
+    },
+    {
+      "name": "js-standard",
+      "heights": [
+        {
+          "minFrameWidth": 0,
+          "height": 513
+        },
+        {
+          "minFrameWidth": 590,
+          "height": 444
+        }
+      ]
+    },
+    {
+      "name": "js-smaller",
+      "heights": [
+        {
+          "minFrameWidth": 0,
+          "height": 433
+        },
+        {
+          "minFrameWidth": 590,
+          "height": 364
+        }
+      ]
+    },
+    {
+      "name": "wat-taller",
+      "heights": [
+        {
+          "minFrameWidth": 0,
+          "height": 686
+        },
+        {
+          "minFrameWidth": 590,
+          "height": 617
+        }
+      ]
+    },
+    {
+      "name": "wat-standard",
+      "heights": [
+        {
+          "minFrameWidth": 0,
+          "height": 476
+        },
+        {
+          "minFrameWidth": 590,
+          "height": 407
+        }
+      ]
+    },
+    {
+      "name": "wat-smaller",
+      "heights": [
+        {
+          "minFrameWidth": 0,
+          "height": 406
+        },
+        {
+          "minFrameWidth": 590,
+          "height": 337
+        }
+      ]
+    },
+    {
+      "name": "tabbed-taller",
+      "heights": [
+        {
+          "minFrameWidth": 0,
+          "height": 774
+        },
+        {
+          "minFrameWidth": 590,
+          "height": 630
+        }
+      ]
+    },
+    {
+      "name": "tabbed-standard",
+      "heights": [
+        {
+          "minFrameWidth": 0,
+          "height": 549
+        },
+        {
+          "minFrameWidth": 590,
+          "height": 420
+        }
+      ]
+    },
+    {
+      "name": "tabbed-shorter",
+      "heights": [
+        {
+          "minFrameWidth": 0,
+          "height": 487
+        },
+        {
+          "minFrameWidth": 590,
+          "height": 350
+        }
+      ]
+    }
+  ]
+}
diff --git a/editor/css/editor-libs/common.css b/editor/css/editor-libs/common.css
index bddb0876b..230d71af5 100644
--- a/editor/css/editor-libs/common.css
+++ b/editor/css/editor-libs/common.css
@@ -457,19 +457,30 @@ body {
   justify-content: space-between;
   align-items: center;
   gap: 1rem;
-  border-bottom: 1px solid var(--border-primary);
 }
 
-.output-header.no-border {
-  border-bottom: 0 none;
+.border-rounded-top {
+  border: 1px solid var(--border-primary);
+  border-radius: var(--button-radius) var(--button-radius) 0 0;
 }
 
-.output-header.full-border {
-  border: 1px solid var(--border-primary);
-  border-width: 1px 1px 0 1px;
+.border-rounded-top-no-bottom {
+  border: solid var(--border-primary);
+  border-width: 1px 1px 0;
   border-radius: var(--button-radius) var(--button-radius) 0 0;
 }
 
+.border-sides {
+  border: solid var(--border-primary);
+  border-width: 0 1px;
+}
+
+.border-rounded-bottom {
+  border: solid var(--border-primary);
+  border-width: 0 1px 1px;
+  border-radius: 0 0 var(--button-radius) var(--button-radius);
+}
+
 .output-heading {
   margin: 0;
   font: var(--type-body-l);
diff --git a/editor/css/tabbed-editor.css b/editor/css/tabbed-editor.css
index 682651313..29862d644 100644
--- a/editor/css/tabbed-editor.css
+++ b/editor/css/tabbed-editor.css
@@ -75,7 +75,6 @@
 
 .console-container {
   position: relative;
-  border-top: 1px solid var(--border-primary);
   padding-top: 0.5rem;
 }
 
diff --git a/editor/tmpl/live-css-tmpl.html b/editor/tmpl/live-css-tmpl.html
index cc810a6bf..ecfab26d0 100644
--- a/editor/tmpl/live-css-tmpl.html
+++ b/editor/tmpl/live-css-tmpl.html
@@ -12,7 +12,7 @@
 
   <body>
     <section class="css-editor-container">
-      <header class="output-header">
+      <header class="output-header border-rounded-top">
         <h4 class="output-heading">%title%</h4>
         <button id="reset" class="reset" type="button">Reset</button>
       </header>
@@ -25,7 +25,10 @@ <h4 class="output-heading">%title%</h4>
         This feature is not supported by your current browser. Check Browser
         compatibility for more details.
       </div>
-      <div id="editor-wrapper" class="editor-wrapper hidden">
+      <div
+        id="editor-wrapper"
+        class="editor-wrapper border-rounded-bottom hidden"
+      >
         %example-code%
       </div>
     </section>
diff --git a/editor/tmpl/live-js-tmpl.html b/editor/tmpl/live-js-tmpl.html
index 9a42661f9..cf9c27bba 100644
--- a/editor/tmpl/live-js-tmpl.html
+++ b/editor/tmpl/live-js-tmpl.html
@@ -14,7 +14,7 @@
     <section id="static">%example-code%</section>
 
     <section id="live" class="live hidden">
-      <header class="output-header full-border">
+      <header class="output-header border-rounded-top-no-bottom">
         <h4 class="output-heading">%title%</h4>
       </header>
       <div id="editor" class="editor"></div>
diff --git a/editor/tmpl/live-tabbed-tmpl.html b/editor/tmpl/live-tabbed-tmpl.html
index 7c27fc9fe..ffa872f11 100644
--- a/editor/tmpl/live-tabbed-tmpl.html
+++ b/editor/tmpl/live-tabbed-tmpl.html
@@ -10,7 +10,7 @@
   </head>
 
   <body>
-    <header class="output-header">
+    <header class="output-header border-rounded-top">
       <h4 class="output-heading">%title%</h4>
       <button id="reset" class="reset" type="button">Reset</button>
     </header>
@@ -21,7 +21,7 @@ <h4 class="output-heading">%title%</h4>
     </noscript>
     <div
       id="editor-container"
-      class="editor-container %editor-height% hidden"
+      class="editor-container %editor-height% hidden border-rounded-bottom"
       %active-tabs%
       %default-tab%
     >
diff --git a/editor/tmpl/live-wat-tmpl.html b/editor/tmpl/live-wat-tmpl.html
index f760e2f1f..fd0427234 100644
--- a/editor/tmpl/live-wat-tmpl.html
+++ b/editor/tmpl/live-wat-tmpl.html
@@ -11,12 +11,12 @@
   <body>
     <section id="static">%example-code%</section>
 
-    <header class="output-header">
+    <header class="output-header border-rounded-top">
       <h4 class="output-heading">%title%</h4>
     </header>
 
     <section id="tab-container" class="tabs">
-      <div class="tab-list" id="tablist" role="tablist">
+      <div class="tab-list border-sides" id="tablist" role="tablist">
         <button
           role="tab"
           aria-selected="false"
diff --git a/lib/heightBuilder.js b/lib/heightBuilder.js
new file mode 100644
index 000000000..99bb5652e
--- /dev/null
+++ b/lib/heightBuilder.js
@@ -0,0 +1,116 @@
+import fse from "fs-extra";
+import glob from "glob";
+
+import getConfig from "./config.js";
+import { getJSPageHeight, getWatPageHeight } from "./processor.js";
+
+const config = getConfig();
+
+function getEditorHeights() {
+  return fse.readJsonSync(config.editorHeights);
+}
+
+/**
+ * Converts content of meta.json to object containing path and editor name of every interactive example present in that file
+ *
+ * In case meta.json is missing required height property or it has unsupported value, exception is thrown
+ * @param metaContent - Content of meta.json as an JS object
+ */
+function getPagesEditorNames(metaContent) {
+  const pages = Object.values(metaContent.pages);
+  const editorNames = {};
+
+  for (const page of pages) {
+    const height = getEditorName(page);
+    if (height !== undefined) {
+      const path = getPagePath(page);
+      editorNames[path] = height;
+    }
+  }
+  return editorNames;
+}
+
+function getPagePath(page) {
+  return `pages/${page.type}/${page.fileName}`;
+}
+
+/**
+ * Returns editor name for a given page, based on its height
+ * Every editor name must have a record in editor-heights.json
+ * @param page - Object describing single interactive example
+ * @return {String} - editor name
+ */
+function getEditorName(page) {
+  switch (page.type) {
+    case "css":
+      return "css";
+    case "tabbed":
+    case "webapi-tabbed":
+      switch (page.height) {
+        case "tabbed-taller":
+        case "tabbed-standard":
+        case "tabbed-shorter":
+          return page.height;
+        default:
+          throw new Error(
+            `MDN-BOB: (heightBuilder.js) Invalid height property for ${page.fileName}`
+          );
+      }
+    case "js": {
+      const height = getJSPageHeight(page.exampleCode);
+      switch (height) {
+        case "taller":
+          return "js-taller";
+        case "":
+          return "js-standard";
+        case "shorter":
+          return "js-smaller";
+        default:
+          throw new Error(
+            `MDN-BOB: (heightBuilder.js) Height '${height}' calculated for JS example '${page.fileName}' is invalid`
+          );
+      }
+    }
+    case "wat": {
+      const height = getWatPageHeight(page.watExampleCode);
+      switch (height) {
+        case "taller":
+          return "wat-taller";
+        case "standard":
+          return "wat-standard";
+        case "shorter":
+          return "wat-smaller";
+        default:
+          throw new Error(
+            `MDN-BOB: (heightBuilder.js) Height '${height}' calculated for WAT example '${page.fileName}' is invalid`
+          );
+      }
+    }
+    default:
+      throw new Error(
+        `MDN-BOB: (heightBuilder.js) Unsupported page type ${page.type}`
+      );
+  }
+}
+
+/**
+ * Builds height-data.json containing path and editor name of every interactive example in `examples` property,
+ * together with content of editor-heights which contains name and the height of every editor type
+ */
+export default function buildHeightData() {
+  const metaJSONArray = glob.sync(config.metaGlob, {});
+  const heightData = {
+    ...getEditorHeights(),
+  };
+  heightData.examples = {};
+
+  for (const metaJson of metaJSONArray) {
+    const file = fse.readJsonSync(metaJson);
+
+    const names = getPagesEditorNames(file);
+    Object.assign(heightData.examples, names);
+  }
+
+  const jsonData = JSON.stringify(heightData, null, 4);
+  fse.outputFileSync(config.heightData, jsonData);
+}
diff --git a/lib/mdn-bob.js b/lib/mdn-bob.js
index 140210d1c..11931f28b 100755
--- a/lib/mdn-bob.js
+++ b/lib/mdn-bob.js
@@ -6,6 +6,7 @@ import webpack from "webpack";
 import webpackConfig from "../webpack.config.js";
 import getConfig from "./config.js";
 import * as pageBuilder from "./pageBuilder.js";
+import buildHeightData from "./heightBuilder.js";
 import * as utils from "./utils.js";
 
 function doWebpack() {
@@ -48,6 +49,10 @@ async function init() {
     console.info("MDN-BOB: Running Webpack...");
     await doWebpack();
 
+    console.info("MDN-BOB: Building height-data");
+    buildHeightData();
+    console.info("MDN-BOB: Height Data was successfully constructed");
+
     console.info("MDN-BOB: Building pages....");
     console.log(await pageBuilder.buildPages());
 
diff --git a/lib/processor.js b/lib/processor.js
index 113ff0c0a..c74406e4d 100644
--- a/lib/processor.js
+++ b/lib/processor.js
@@ -107,11 +107,23 @@ function getJSExampleHeightByLineCount(lineCount) {
  * @returns {String} jsExample - The example wrapped into code tag
  */
 function preprocessJSExample(exampleCode) {
-  const lineCount = (exampleCode.match(/\n/g) || []).length + 1;
-  const height = getJSExampleHeightByLineCount(lineCount);
+  const height = getHeightByLineCount(
+    exampleCode,
+    getJSExampleHeightByLineCount
+  );
   return `<pre><code id="static-js" data-height="${height}">${exampleCode}</code></pre>`;
 }
 
+/**
+ * Returns BOB class name used for setting height for JavaScript interactive example present at provided path
+ * @param {String} sourcePath - Path to JS example source code. For example: 'pages/tabbed/header.html'
+ * @return {String} height - BOB class name used for setting height
+ */
+export function getJSPageHeight(sourcePath) {
+  const exampleCode = fse.readFileSync(sourcePath, "utf8");
+  return getHeightByLineCount(exampleCode, getJSExampleHeightByLineCount);
+}
+
 /**
  * Returns the height of the example block based on the line count
  * @param {Number} lineCount - Count of lines in the source code
@@ -136,14 +148,34 @@ function getWatExampleHeightByLineCount(lineCount) {
  * @returns {String} jsExample - The examples wrapped into code tag
  */
 function preprocessWatExample(watCode, jsCode) {
-  const lineCount = (watCode.match(/\n/g) || []).length + 1;
-  const height = getWatExampleHeightByLineCount(lineCount);
+  const height = getHeightByLineCount(watCode, getWatExampleHeightByLineCount);
   return `
         <pre><code id="static-wat" data-height="${height}">${watCode}</code></pre>
         <pre><code id="static-js" data-height="${height}">${jsCode}</code></pre>
     `;
 }
 
+/**
+ * Returns BOB class name used for setting height for WAT interactive example present at provided path
+ * @param {String} sourcePath - Path to WAT example source code. For example: 'pages/tabbed/header.html'
+ * @return {Number} height - BOB class name used for setting height
+ */
+export function getWatPageHeight(watSrc) {
+  const watCode = fse.readFileSync(watSrc, "utf8");
+  return getHeightByLineCount(watCode, getWatExampleHeightByLineCount);
+}
+
+/**
+ * Counts amount of lines in provided source code, executes provided function with that amount as an argument and returns result of that function
+ * @param {String} sourceCode
+ * @param {Function} linesToHeightFunc - function accepting amount of lines as an argument and returning BOB class name used for setting height
+ * @return {String} - BOB class name used for setting height
+ */
+function getHeightByLineCount(sourceCode, linesToHeightFunc) {
+  const lineCount = (sourceCode.match(/\n/g) || []).length + 1;
+  return linesToHeightFunc(lineCount);
+}
+
 /**
  * Process JS example which has written in HTML.
  * @param {String} exampleCode - The example source code itself