☰

●→■ Unround Everything Everywhere ◙

Forces zero border-radius to everything.

  1. /* ==UserStyle==
  2. @name           ●→■ Unround Everything Everywhere ◙
  3. @description    Forces zero border-radius to everything.
  4. @namespace      myfonj
  5. @version        1.8.0
  6. @license        CC0 - Public Domain
  7. ==/UserStyle== */
  8. /*
  9. https://userstyles.world/style/8283/unround-everything-everywhere
  10. https://greasyfork.org/en/scripts/408378/versions/new
  11.  
  12. Changelog
  13. 1.8.0 (2025-03-03) seznamzpravy.cz un-squircle
  14. 1.7.0 (2025-03-03) copilot.microsoft.com un-squircle
  15. 1.6.1 (2025-02-19) Spotify small "+" button.
  16. 1.6.0 (2025-02-19) Enabled aggressive unrounding in SVG (when possible). Tell me when it borkes something for you.
  17. 1.5.0 (2025-02-18) Some Spotify touches. And trying aggressive unrounding in SVG, but keeping off for release.
  18. 1.4.4 (2024-05-17) x.com "Terror from the deep"
  19. 1.4.3 (2024-04-26) + chromium.org for avatar unrounding (issues.chromium.org)
  20. 1.4.2 (2024-04-03) Google One avatar thinner
  21. 1.4.1 (2024-04-03) Google One avatar four-colour outline fix for google search (thicker for now)
  22. 1.4.0 (2024-03-30) Google One avatar four-colour outline
  23. 1.3.1 (2024-02-09) Attempt to fix Greasyfork bug in conversion to JS.
  24. 1.3.0 (2023-11-13) Better radio rounding permission, some checkbox SVG un-rounding
  25. 1.2.6 (2023-10-19) Just a minor refactor
  26. 1.2.5 (2023-09-21) FB new logo ("f" is slightly smaller than it should be, but whatever)
  27. 1.2.4 (2023-09-06) + outline offset
  28. 1.2.3 (2023-09-06) Facebook avar status outlines squared.
  29. 1.2.2 (2023-02-22) Fix the Facebook logo. Mwahahaha.
  30. 1.2.1 (2023-02-02) Let's try to let true radio inputs be round.
  31. 1.2.0 (2023-01-24) Just released to userstyles.world, reworded comments.
  32. */
  33.  
  34. /*
  35. Global and aggresive
  36. */
  37. *:not(#u#n#r#o#u#n#d):not(input[type="radio" i]):not(input[type="radio" i] + label){
  38.  &,
  39.  &::before,
  40.  &::after {
  41.   border-radius: 0 !important;
  42. }}
  43. /*
  44. Not that aggresive
  45. as seen at https://not-checklist.intopia.digital/
  46. */
  47. label input[type="checkbox" i] + svg rect[rx] {
  48.  rx: 0 !important;
  49. }
  50. label input[type="checkbox" i] + svg rect[ry] {
  51.  ry: 0 !important;
  52. }
  53.  
  54. /*
  55. you know what? hammertime!
  56. aggressive unrounding in SVG
  57. */
  58. circle[cx="50%"][cy="50%"][r="50%"]:first-child {
  59. 	svg & { overflow: hidden; }
  60.  r: 100% !important;
  61. 	fill: red !important;
  62. }
  63. svg rect {
  64.  rx: 0 !important;
  65.  ry: 0 !important;
  66. }
  67. /* */
  68.  
  69.  
  70. @layer i_miss_true_user_origin_level_stylesheets {
  71.   /*
  72.     Firefox on Windows bug(?): touching any border property
  73.     reverts "fancy" modern thin 1px borders
  74.     to "ugly" retro old 3px outset look.
  75.  
  76.     This is an attempt to circumnvent it by setting it back to 1px
  77.     at lowest possible specifity, so any (unlayered) author declaration wins over this.
  78.  
  79.     Using :where() here is insufficient, because this this "wannabe userstyle" is injected as
  80.     the last author style, so it would win over prior `*` declarations anyway.
  81.   */
  82.   :where(input, button, select) {
  83.     border-width: 1px;
  84.   }
  85. }
  86.  
  87. /*
  88. FB & Workplace extra fixes: square masks
  89. (not fenced to work on custom domains, but selector should be specific enough
  90. */
  91. :root#facebook svg[role] > mask[id]:first-child + g[mask]:last-child
  92. {
  93.   mask: none !important;
  94.   /* circle outline, some status perhaps */
  95.   & circle { opacity: 0.1 !important; }
  96.   /* circle outline to real outline */
  97.   & image:has(~ circle[stroke="var(--accent)"])
  98.   {
  99.    outline: 2px solid var(--accent);
  100.    outline-offset: 2px;
  101.    & ~ circle { display: none; }
  102.  }
  103. }
  104.  
  105. @-moz-document domain("facebook.com") {
  106.   /*
  107.     FB Logo
  108.   */
  109.   :root#facebook svg[viewBox="0 0 36 36"] path {
  110.     /*
  111.      logo - circle to square
  112.      original path is circle with tiny notch on the bottom that lets (curved!) bottom edge of "f" be pushed up
  113.      presumably because otherwise it could be percieved as "sticing out" of the circle due white-blue contrast
  114.      second paths are older, first is from 2023-09-21
  115.     */
  116.     &[d="M20.181 35.87C29.094 34.791 36 27.202 36 18c0-9.941-8.059-18-18-18S0 8.059 0 18c0 8.442 5.811 15.526 13.652 17.471L14 34h5.5l.681 1.87Z"] ,
  117.     &[d="M15 35.8C6.5 34.3 0 26.9 0 18 0 8.1 8.1 0 18 0s18 8.1 18 18c0 8.9-6.5 16.3-15 17.8l-1-.8h-4l-1 .8z"] {
  118.       d: path("M0 0 H 36 V 36 H 0 z");
  119.     }
  120.     /*
  121.      logo - "f" not curved on the bottom
  122.      this removes the bottom curvature (v12.7c1 .2 2 .3 3 .3s2-.1 3-.3) and sticks it (almost) to viewbox bondary.
  123.      (1px -- V–instead of V 36 -- difference to prevent aforementioned perceptual overhang.)
  124.      I guess this is the most nitpick-ish thing I have ever done.
  125.     */
  126.     &[d="M13.651 35.471v-11.97H9.936V18h3.715v-2.37c0-6.127 2.772-8.964 8.784-8.964 1.138 0 3.103.223 3.91.446v4.983c-.425-.043-1.167-.065-2.081-.065-2.952 0-4.09 1.116-4.09 4.025V18h5.883l-1.008 5.5h-4.867v12.37a18.183 18.183 0 0 1-6.53-.399Z"],
  127.     &[d="M25 23l.8-5H21v-3.5c0-1.4.5-2.5 2.7-2.5H26V7.4c-1.3-.2-2.7-.4-4-.4-4.1 0-7 2.5-7 7v4h-4.5v5H15v12.7c1 .2 2 .3 3 .3s2-.1 3-.3V23h4z"] {
  128.       d: path("M25 23l.8-5H21v-3.5c0-1.4.5-2.5 2.7-2.5H26V7.4c-1.3-.2-2.7-.4-4-.4-4.1 0-7 2.5-7 7v4h-4.5v5H15   V 35 h 6    V23h4z");
  129.     }
  130.   }
  131. }
  132.  
  133. @-moz-document domain("twitter.com"), domain("x.com") {
  134.   /*
  135.     Twitter extra fixes
  136.   */
  137.   [style*='clip-path: url("#circle-hw-shapeclip-clipconfig")'] {
  138.     clip-path: none !important;
  139.   }
  140. }
  141.  
  142. @-moz-document domain("web.whatsapp.com") {
  143.   /*
  144.     WhatsApp extra fixes
  145.   */
  146.   svg:has(path.background) {
  147.     background-color: rgba(var(--white-rgb),.16);
  148.   }
  149.   svg:has(path.background) g path{
  150.     opacity: .3;
  151.   } 
  152.   svg:has(path.background) path.background {
  153.     display: none
  154.   }
  155. }
  156.  
  157.  
  158. @-moz-document domain("google.com"), domain("chromium.org") {
  159.   /*
  160.   Google One avatar four-colour outline
  161.   <svg focusable="false" height="40px" version="1.1" viewBox="0 0 40 40" width="40px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="opacity:1.0">
  162.    <path d="M4.02,28.27C2.73,25.8,2,22.98,2,20c0-2.87,0.68-5.59,1.88-8l-1.72-1.04C0.78,13.67,0,16.75,0,20c0,3.31,0.8,6.43,2.23,9.18L4.02,28.27z" fill="#F6AD01"></path>
  163.    <path d="M32.15,33.27C28.95,36.21,24.68,38,20,38c-6.95,0-12.98-3.95-15.99-9.73l-1.79,0.91C5.55,35.61,12.26,40,20,40c5.2,0,9.93-1.98,13.48-5.23L32.15,33.27z" fill="#249A41"></path>
  164.    <path d="M33.49,34.77C37.49,31.12,40,25.85,40,20c0-5.86-2.52-11.13-6.54-14.79l-1.37,1.46C35.72,9.97,38,14.72,38,20c0,5.25-2.26,9.98-5.85,13.27L33.49,34.77z" fill="#3174F1"></path>
  165.    <path d="M20,2c4.65,0,8.89,1.77,12.09,4.67l1.37-1.46C29.91,1.97,25.19,0,20,0l0,0C12.21,0,5.46,4.46,2.16,10.96L3.88,12C6.83,6.08,12.95,2,20,2" fill="#E92D18"></path>
  166.   </svg>
  167.   
  168.   So technically scoping to
  169.   svg[style="opacity:1.0"][viewBox="0 0 40 40"]:has(
  170.   >path:last-child:nth-of-type(4)
  171.   ) {}
  172.   would work, but let's not introduce unnecessary complexity here
  173.   
  174.   */
  175.   
  176.   path[d="M4.02,28.27C2.73,25.8,2,22.98,2,20c0-2.87,0.68-5.59,1.88-8l-1.72-1.04C0.78,13.67,0,16.75,0,20c0,3.31,0.8,6.43,2.23,9.18L4.02,28.27z"][fill="#F6AD01"] {
  177.     d: path("M 2 2 v 36 l 2 -2 V 4 Z");
  178.   }
  179.   path[d="M32.15,33.27C28.95,36.21,24.68,38,20,38c-6.95,0-12.98-3.95-15.99-9.73l-1.79,0.91C5.55,35.61,12.26,40,20,40c5.2,0,9.93-1.98,13.48-5.23L32.15,33.27z"][fill="#249A41"] {
  180.     d: path("M 2 38 h 36 l -2 -2 H 4 Z");
  181.   }
  182.   path[d="M33.49,34.77C37.49,31.12,40,25.85,40,20c0-5.86-2.52-11.13-6.54-14.79l-1.37,1.46C35.72,9.97,38,14.72,38,20c0,5.25-2.26,9.98-5.85,13.27L33.49,34.77z"][fill="#3174F1"] {
  183.     d: path("M 38 2 v 36 l -2 -2 V 4 Z");
  184.   }
  185.   path[d="M20,2c4.65,0,8.89,1.77,12.09,4.67l1.37-1.46C29.91,1.97,25.19,0,20,0l0,0C12.21,0,5.46,4.46,2.16,10.96L3.88,12C6.83,6.08,12.95,2,20,2"][fill="#E92D18"] {
  186.     d: path("M 2 2 h 36 l -2 2 H 4 Z");
  187.   }
  188. }
  189.  
  190. /*
  191. Spotify (✓) and (+) marks.
  192. Does not add much, so maybe will remove later.
  193. Basically now only on the "because I can" premise.
  194. Shrinking it by few pixels, to preserve "weight" without changing colour.
  195. Technically it is equally trivial to "square" the logo, but it's to much even for me.
  196. */
  197. @-moz-document domain("spotify.com") {
  198.  path[d="M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12zm16.398-2.38a1 1 0 0 0-1.414-1.413l-6.011 6.01-1.894-1.893a1 1 0 0 0-1.414 1.414l3.308 3.308 7.425-7.425z"] {
  199.   d: path("M 4 4 H 20 V 20 H 4 Z      M1 12m16.398-2.38a1 1 0 0 0-1.414-1.413l-6.011 6.01-1.894-1.893a1 1 0 0 0-1.414 1.414l3.308 3.308 7.425-7.425z");
  200.  }
  201.  path[d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm11.748-1.97a.75.75 0 0 0-1.06-1.06l-4.47 4.47-1.405-1.406a.75.75 0 1 0-1.061 1.06l2.466 2.467 5.53-5.53z"] {
  202.   d: path("M 2 2 H 14 V 14 H 2 Z      M0 8m11.748-1.97a.75.75 0 0 0-1.06-1.06l-4.47 4.47-1.405-1.406a.75.75 0 1 0-1.061 1.06l2.466 2.467 5.53-5.53z");
  203.  }
  204.  path[d="M11.999 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zm-11 9c0-6.075 4.925-11 11-11s11 4.925 11 11-4.925 11-11 11-11-4.925-11-11z"] {
  205.   d: path("M 2 2 H 22 V 22 H 2 Z");
  206.   stroke-width: 2px;
  207.   fill: none;
  208.   stroke: color-mix(in srgb,currentcolor, transparent);
  209.  }
  210.  path[d="M8 1.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13zM0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8z"] {
  211.   d: path("M 1 1 H 15 V 15 H 1 Z");
  212.   stroke-width: 1.25px;
  213.   fill: none;
  214.   stroke: color-mix(in srgb,currentcolor, transparent);
  215.  }
  216. }
  217.  
  218.  
  219. /*
  220. § un-squircling zone
  221. possibly will be made global (?)
  222. */
  223.  
  224. @-moz-document domain("copilot.microsoft.com") {
  225.  [class*="squircle"] {
  226.   clip-path: none;
  227.  }
  228. }
  229.  
  230. @-moz-document domain("seznamzpravy.cz") {
  231.  svg > defs:has([id*="squircle"]) ~ image[mask]:only-of-type {
  232.   mask: none !important;
  233.  }
  234. }