Remove Border-Radius from Twitter

How to Remove Border-Radius from Twitter

Over at Twitter headquarters in San Francisco back in June 2017, Grace Kim, the VP of Design + Research @ Twitter published a blog post letting people know how Twitter is moving to a more round shaped design for Twitter profile images, Buttons, and the Tweet box, etc…

Not a lot of people are happy about this new design let me tell you.

I am personally not a big fan of the rounded design either. As you can see from the designs of News47ell, I enjoy a design with no radius, for example, Pinboard & Instapaper.

What if I told you that I can teach you how to remove Border-Radius from Twitter?

This idea for this article came when Sara Soueidan tweeted this:

So, I favorited the tweet while I looked for a solution on how to remove Border-Radius from Twitter because like Sara, I also don’t like it much. I had never tried looking for a solution until now.

Before we dive into how to remove Border-Radius from Twitter, let me show you some of my favorite tweets about the new round avatar design:

At first, I wanted the use of Tampermonkey to accomplish my goal1 But changing CSS using JavaScript in a <div class=""> is a bit confusing for me at the moment. Maybe I’ll learn how to do that later, I’ll make sure to link to an article about it here.

For now, let’s do this the other way, which is by using another Chrome extension called Stylus which is an identical cleaner fork of the other popular Chrome extension that caused a bit of privacy concerns for its users a while ago which you can read all about it over at ghacks.

What Stylus allows you to do is change the CSS code of any website you want. Imagine the endless possibilities of changes that you can do to all your favorite websites just by knowing how to use this Chrome extension and how to write CSS code.

A very simple possibility is that you can create your very own dark mode theme to all of your favorite websites.

For Twitter, it was a matter of inspecting a few elements here and there. That’s it.

5 Easy Steps to remove Border-Radius from Twitter #CSS #DesignClick To Tweet

Below, is a step by step guide and also the CSS code which I personally use:

Step 1:

Install the Stylus extension from the Chrome Web Store

Step 2:

Copy the code snippet below:



.RichEditor {
    border-radius: 0px;
}
.DashboardProfileCard-avatarLink {
    border-radius: 0px;
}
.DashboardProfileCard-avatarImage {
    border-radius: 0px;
}
.avatar {
    border-radius: 0px;
}
.ProfileCard-avatarImage {
    border-radius: 0px;
}
.ProfileCard-avatarLink {
    background-color: transparent;
    border-radius: 0px;
}
.hovercard.profile-card .ProfileCard-avatarImage {
    border: 0px;
}
.EdgeButton,
.EdgeButton:visited {
    border-radius: 0px;
}
.nav .session .dropdown-toggle:before {
    border-radius: 0px;
}
.ProfileAvatar {
    border-radius: 0px;
    background: transparent;
    border: 0px;
}
.ProfileAvatar-image,
.ProfileAvatar-placeholderImage {
    border-radius: 0px;
}
.nav .session .dropdown-toggle {
    border-radius: 0px;
}
.Avatar {
    border-radius: 0px;
}
.global-nav .search-input {
    border-radius: 0px;
}
.form-search .typeahead {
    border-radius: 0px;
}
.EdgeButton.EdgeButton--icon {
    border-radius: 0px;
}
.DMAvatar {
    border-radius: 0px;
}
.DMComposer-container {
    border-radius: 0px;
}
.ProfileUserList .Avatar {
    border-radius: 0px;
}
.EdgeButton,
.EdgeButton:visited {
    border-radius: 0px;
}
.ProfileCardMini-avatarImage {
    border-radius: 0px;
}
.TwitterCard-container {
    border-radius: 0px;
}
.AdaptiveMedia {
    border-radius: 0px;
}
.AdaptiveMedia-video {
    border-radius: 0px;
}

Bookmark this page and check it later to keep your CSS up to date

Step 3:

Visit Twitter then click on the Stylus icon crx_Chrome_extension_icon

Step 4:

Hover and click only over the Twitter.com domain, NOT over where it says: this URL.

Google Chrome Extension Stylus popup

Step 5:

In the window that just opened, do the following:

Google Chrome Extension Stylus CSS Style Window

  1. Name this new style
  2. Paste the code you copied in step 2.
  3. Click on Save.

That’s it. You don’t even have to refresh Twitter if you have it open.

Everything should be a square design.

And here’s a video of how it’s all done:


Congratulations, you just learned how to remove Border-Radius from Twitter and with this extension, you can keep modifying Twitter or any other site you want to look any way you want.

The possibilities are endless. So have fun. Enjoy your new Twitter design and keep on styling.


  1. Since I am a Google Chrome user