diff --git a/content/docs/shortcodes/p5/iframe.md b/content/docs/shortcodes/p5/iframe.md
index 93dbe5a7..fb85b6de 100644
--- a/content/docs/shortcodes/p5/iframe.md
+++ b/content/docs/shortcodes/p5/iframe.md
@@ -44,6 +44,16 @@ Example took from the [p5 examples](https://p5js.org/examples/sound-sound-effect
 
 {{< p5-iframe sketch="/showcase/sketches/sound.js" width="225" height="225" >}}
 
+## Styling
+
+{{< details title="p5-iframe markdown" open=false >}}
+{{< highlight html >}}
+{{</* p5-iframe sketch="/showcase/sketches/style.js" width="225" height="225" stylesheet="/showcase/styles/style.css" marginWidth="0" marginHeight="0" frameBorder="0" scrolling="no" */>}}
+{{< /highlight >}}
+{{< /details >}}
+
+{{< p5-iframe sketch="/showcase/sketches/style.js" width="225" height="225" stylesheet="/showcase/styles/style.css" marginWidth="0" marginHeight="0" frameBorder="0" scrolling="no">}}
+
 # p5-global-iframe
 
 ```html
diff --git a/content/sketches/style.js b/content/sketches/style.js
new file mode 100644
index 00000000..927d6156
--- /dev/null
+++ b/content/sketches/style.js
@@ -0,0 +1,28 @@
+let div;
+let data1;
+let data2;
+let button;
+
+function setup(){
+    createCanvas(255, 255);
+    background(0);
+
+
+    div = createDiv();
+
+    data1 = createInput("");
+    data1.attribute('placeholder', 'test input');
+
+    button = createButton("test button");
+
+    div.class("container");
+
+    div.child(data1);
+    div.child(button);
+
+    div.position(0, 0)
+}
+
+function draw(){
+
+}
\ No newline at end of file
diff --git a/content/styles/style.css b/content/styles/style.css
new file mode 100644
index 00000000..16c9ff4e
--- /dev/null
+++ b/content/styles/style.css
@@ -0,0 +1,76 @@
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
+
+.container {
+  width: calc(100% - 20px);
+  height: 100%;
+  margin: 0 10px;
+
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: center;
+}
+
+.container > * {
+  height: 35px;
+  padding: 0;
+  margin-top: 10px;
+  border-radius: 15px;
+  border: none;
+
+  font-family: "Montserrat", sans-serif;
+  font-weight: 800;
+}
+
+.container > *:focus {
+  outline: none;
+}
+
+.container > *::selection {
+  background: hsl(282deg 62% 53%);
+  color: white;
+}
+
+.container > input {
+  padding: 0 10px;
+  text-transform: capitalize;
+  caret-color: hsl(338deg 95% 53%);
+}
+
+.container > button {
+  text-transform: uppercase;
+
+  color: white;
+
+  background-image: linear-gradient(
+    135deg,
+    hsl(282deg 62% 53%) 1%,
+    hsl(288deg 58% 51%) 29%,
+    hsl(294deg 56% 49%) 43%,
+    hsl(300deg 56% 48%) 55%,
+    hsl(306deg 59% 49%) 64%,
+    hsl(312deg 62% 49%) 73%,
+    hsl(316deg 66% 50%) 80%,
+    hsl(321deg 70% 51%) 86%,
+    hsl(325deg 75% 52%) 91%,
+    hsl(328deg 80% 52%) 95%,
+    hsl(332deg 85% 52%) 98%,
+    hsl(335deg 90% 53%) 99%,
+    hsl(338deg 95% 53%) 100%
+  );
+
+  box-shadow: 2px 2px 1px 0px #762543;
+  cursor: pointer;
+
+  transition: all 0.3s ease;
+  filter: brightness(100%);
+}
+
+.container > button:hover {
+  filter: brightness(120%);
+}
+
+.container > button:active {
+  box-shadow: inset 2px 2px 1px 0px #762543;
+  filter: brightness(90%);
+}
diff --git a/layouts/shortcodes/p5-iframe.html b/layouts/shortcodes/p5-iframe.html
index 1547b8d2..2e321667 100644
--- a/layouts/shortcodes/p5-iframe.html
+++ b/layouts/shortcodes/p5-iframe.html
@@ -5,14 +5,20 @@
 {{ $lib3 := .Get `lib3` }}
 {{ $lib4 := .Get `lib4` }}
 {{ $lib5 := .Get `lib5` }}
+{{ $stylesheet := .Get `stylesheet` }}
 
 <iframe
+  marginheight="{{default "10" (.Get `marginHeight`)}}"
+  marginwidth="{{default "10" (.Get `marginWidth`)}}"
+  frameborder="{{default "1" (.Get `frameBorder`)}}"
+  scrolling="{{default "no" (.Get `scrolling`)}}"
   id="{{ strings.TrimSuffix ".js" (path.Base $sketch) }}"
   style="width:{{ default "800" (.Get `width`) }}px; height:{{ default "600" (.Get `height`) }}px"
   srcdoc="
         <!DOCTYPE html>
         <html>
           <head>
+            {{ if isset .Params "stylesheet" }} <link rel='stylesheet' href={{ $stylesheet }}> {{ end }}
             <script src=https://cdnjs.cloudflare.com/ajax/libs/p5.js/{{ default $defver (.Get `ver`) }}/p5.min.js></script>
             <script src=https://cdnjs.cloudflare.com/ajax/libs/p5.js/{{ default $defver (.Get `ver`) }}/addons/p5.sound.min.js></script>
             {{ if isset .Params "lib1" }} <script src={{ $lib1 }}></script> {{ end }}