fuck webkit

src/components/sections/boardMembers.js

@@ -37,11 +37,14 @@ const BoardMembers = () => {
         {data.allSanityAuthor.edges.map(({ node: member }) => (
           <article key={member._id} className={styles.card}>
             <div className={styles.header}>
-              <GatsbyImage
-                image={member.image.asset.gatsbyImageData}
-                className={styles.headerImage}
-                alt={"Bilde av styemedlem, " + member.name}
-              />
+              <div className={styles.headerImageContainer}>
+                <GatsbyImage
+                  image={member.image.asset.gatsbyImageData}
+                  className={styles.headerImage}
+                  alt={"Bilde av styemedlem, " + member.name}
+                  roundedCircle
+                />
+              </div>
               <div className={styles.info}>
                 <h3>{member.name}</h3>
                 <p>{member.role}</p>

src/components/sections/boardMembers.module.css

@@ -37,10 +37,25 @@
   align-items: center;
   justify-content: space-evenly;
 }
-.headerImage {
-  border-radius: 50%;
+.headerImageContainer {
   border: 5px solid white;
-  overflow: hidden; /* Fuck webkit and apple for not following web standards */
+  display: inline-block;
+
+  /* Fuck webkit */
+  overflow: hidden;
+  border-radius: 50%;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  -khtml-border-radius: 50%;
+  -webkit-mask-image: -webkit-radial-gradient(white, black);
+}
+.headerImage {
+  /* Fuck webkit */
+  border-radius: 50%;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  -khtml-border-radius: 50%;
+
   /* box-shadow: inset 0 0 10px #000000; */
 }