diff --git a/js/temp.js b/js/temp.js
index b15a124..dac433e 100644
--- a/js/temp.js
+++ b/js/temp.js
@@ -114,17 +114,7 @@ function constructBarStyles(layer){
 			bar.fillDims = {'width': bar.width + "px", 'height': bar.height + "px"}
 			if (dir !== undefined)
 			{
-				bar.fillDims[DIR_MARGINS[dir]] = "0px"
-				if (dir == UP || dir == DOWN)
-				{
-					bar.fillDims.height = bar.height * bar.progress + "px"
-					if (dir == UP) bar.fillDims['margin-top'] =  bar.height * (1 - Math.min(bar.progress, 1)) + "px"
-				}
-				else
-				{
-					bar.fillDims.width = bar.width * bar.progress + "px"
-					if (dir == LEFT) bar.fillDims['margin-left'] =  bar.width * (1 - Math.min(bar.progress, 1)) + "px"
-				}
+				bar.fillDims['clip-path'] = 'inset(0% 0% 50% 0%)'
 			}
 		}
 
diff --git a/js/v.js b/js/v.js
index d4ad027..4aa7e34 100644
--- a/js/v.js
+++ b/js/v.js
@@ -291,12 +291,12 @@ function loadVue() {
 	Vue.component('bar', {
 		props: ['layer', 'data'],
 		template: `
-		<div v-if="tmp[layer].bars && tmp[layer].bars[data].unlocked" v-bind:style="{'position': 'relative'}"><div class ="barBorder"  v-bind:style="[tmp[layer].bars[data].style, tmp[layer].bars[data].baseStyle, tmp[layer].bars[data].borderStyle, tmp[layer].bars[data].dims]">
+		<div v-if="tmp[layer].bars && tmp[layer].bars[data].unlocked" v-bind:style="{'position': 'relative'}"><div class ="barBorder barBase"  v-bind:style="[tmp[layer].bars[data].style, tmp[layer].bars[data].baseStyle, tmp[layer].bars[data].borderStyle, tmp[layer].bars[data].dims]">
 			
 			<div class = "overlayTextContainer" v-bind:style="[tmp[layer].bars[data].dims]">
 				<span class = "overlayText" v-bind:style="[tmp[layer].bars[data].style, tmp[layer].bars[data].textStyle]" v-html="tmp[layer].bars[data].display"></span>
 			</div>
-			<div class ="fill" v-bind:style="[tmp[layer].bars[data].style, tmp[layer].bars[data].fillStyle, tmp[layer].bars[data].fillDims]"></div>
+			<div class ="fill barBorder" v-bind:style="[tmp[layer].bars[data].style, tmp[layer].bars[data].fillStyle, tmp[layer].bars[data].borderStyle, tmp[layer].bars[data].fillDims]"></div>
 		
 		</div></div>
 		`
diff --git a/style.css b/style.css
index a5431ac..289ef80 100644
--- a/style.css
+++ b/style.css
@@ -136,12 +136,16 @@ h1, h2, h3, b, input {
 	text-shadow: 0px 0px 7px var(--color);
 }
 
+.barBase {
+	overflow: hidden;
+	-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
+
+}
+
 .barBorder {
 	border: 2px solid;
 	border-radius: 10%;
 	border-color: var(--color);
-	overflow: hidden;
-	-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
 }
 
 .overlayTextContainer {
@@ -156,7 +160,7 @@ h1, h2, h3, b, input {
 
 .fill {
 	background-color: var(--color);
-	border-radius: 5%;
+	border-radius: 10%;
     position: absolute;
 	overflow: hidden;
 }