CornerBlox - CSS theme to add corners to Roblox where forgotten

[pyxfluff (Pyx)]

CornerBlox is a simple CSS I made to add corners where forgotton by Roblox.

if this belongs somewhere else pls just let me know instead of flagging.

UserStyles.world:

CornerBlox by darkpixlz

Raw CSS

/* ==UserStyle==
@name         CornerBlox
@version      20220618.17.35
@namespace    userstyles.world/user/darkpixlz
@description  Corners for Roblox that were left out
@author       darkpixlz
@license      No License
==/UserStyle== */

@-moz-document domain("roblox.com") {
div {
    border-radius: 8px
}

.category-tabs {
    border-radius: 8px
}

body.btr-embed .category-tabs {
    border-radius: 8px
}

.dark-theme .rbx-tabs-vertical .category-tabs .menu-vertical {
    border-radius: 8px
}

.dark-theme .stack .stack-list .stack-row {
    border-radius: 8px;
}



.game-main-content.follow-button-enabled .favorite-follow-vote-share .game-favorite-button-container .icon-label {
    display: none
}

.gotham-font .game-main-content.follow-button-enabled .favorite-follow-vote-share .game-favorite-button-container .favorite-button {
    width: 50px
}

.dark-theme .scroller {
    border-radius: 8px
}

.rbx-nav-sponsor img {
    border-radius: 8px
}

.dark-theme .rbx-tabs-horizontal .nav-tabs {
    border-radius: 8px
}

.content .page-content .form-group.birthday-container .rbx-select-group .rbx-select,
.content .page-content .form-group.gender-container .gender-button {
    border-radius: 8px
}

.dark-theme .chat-container .chat-main .chat-header {
    border-radius: 8px 8px 0px 0px
}

.dark-theme .rbx-tabs-horizontal .rbx-tab .rbx-tab-heading {
    border-radius: 8px
}

.dark-theme .rbx-tabs-horizontal .rbx-tab.active .rbx-tab-heading {
    border-radius: 0px 0px 0px 4px
}

.thumbnail-holder .thumbnail-span > img,
.btr-bg-btn[data-color="none"],
#AssetThumbnail[data-btr-bg="none"] .thumbnail-span {
    border-radius: 8px
}

.dark-theme .table-striped > tbody > tr:nth-child(2n) > td,
.dark-theme .table-striped > tbody > tr:nth-child(2n) > th {
    border-radius: 8px
}

.amount icon-robux-container {
    border-radius: 0px 0px 8px 8px !important;
}

/* wth this name is long */
.gotham-font.chat-container .btn-control-xs,
.gotham-font .chat-container .btn-control-xs,
.gotham-font.chat-container .chat-search-input,
.gotham-font .chat-container .chat-search-input,
.gotham-font .chat-main .btn-control-md,
.gotham-font .create-chat-container .select-friends-btns .select-friends-cancel,
.gotham-font .create-chat-container .select-friends-btns .select-friends-save,
.gotham-font .details-btns-fixed button,
.gotham-font .details-btns button,
.gotham-font .details-container .details-input,
.gotham-font .details-header-container .details-input,
.gotham-font .dialog-container .dialog-input,
.gotham-font .game-item-container .game-btn,
.gotham-font .group-dialog .group-name-editor .group-name-input,
.gotham-font .group-dialog .group-name-editor .group-name-save,
.gotham-font .group-dialog .play-together-game-editor .group-name-input,
.gotham-font .group-dialog .play-together-game-editor .group-name-save {
    border-radius: 0px 0px 8px 8px;
}

.dark-theme .dialog-container .dialog-input-container .dialog-input {
    width: 250px;
    right: 50px !important
}

#settings-container .left-navigation,
.dark-theme .menu-vertical {
    border-radius: 8px
}

.catalog-container .search-container .input-group .search-input {
    border-radius: 8px
}

/* light theme (are you ok if ur using this)*/
div {
    border-radius: 8px
}

.category-tabs {
    border-radius: 8px
}

body.btr-embed .category-tabs {
    border-radius: 8px
}

.light-theme .rbx-tabs-vertical .category-tabs .menu-vertical {
    border-radius: 8px
}

.light-theme .stack .stack-list .stack-row {
    border-radius: 8px;
}



.game-main-content.follow-button-enabled .favorite-follow-vote-share .game-favorite-button-container .icon-label {
    display: none
}

.gotham-font .game-main-content.follow-button-enabled .favorite-follow-vote-share .game-favorite-button-container .favorite-button {
    width: 50px
}

.light-theme .scroller {
    border-radius: 8px
}

.rbx-nav-sponsor img {
    border-radius: 8px
}

.light-theme .rbx-tabs-horizontal .nav-tabs {
    border-radius: 8px
}

.content .page-content .form-group.birthday-container .rbx-select-group .rbx-select,
.content .page-content .form-group.gender-container .gender-button {
    border-radius: 8px
}

.light-theme .chat-container .chat-main .chat-header {
    border-radius: 8px 8px 0px 0px
}

.light-theme .rbx-tabs-horizontal .rbx-tab .rbx-tab-heading {
    border-radius: 8px
}

.light-theme .rbx-tabs-horizontal .rbx-tab.active .rbx-tab-heading {
    border-radius: 0px 0px 0px 4px
}

.thumbnail-holder .thumbnail-span > img,
.btr-bg-btn[data-color="none"],
#AssetThumbnail[data-btr-bg="none"] .thumbnail-span {
    border-radius: 8px
}

.light-theme .table-striped > tbody > tr:nth-child(2n) > td,
.light-theme .table-striped > tbody > tr:nth-child(2n) > th {
    border-radius: 8px
}

.amount icon-robux-container {
    border-radius: 0px 0px 8px 8px !important;
}

/* Dark mode + better support for API sites */

.swagger-section.show-warning {
    background-color: #232527;
    color: white
}

.swagger-section .swagger-ui-wrap ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operation.get div.content,
.swagger-section .swagger-ui-wrap ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operation.post div.content,
.swagger-section .swagger-ui-wrap ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operation.head div.content,
.swagger-section .swagger-ui-wrap ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operation.put div.content,
.swagger-section .swagger-ui-wrap ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operation.patch div.content,
.swagger-section .swagger-ui-wrap ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operation.delete div.content {
    background-color: #2c2d2f;
    color: white
}

.swagger-section .swagger-ui-wrap .model-signature pre,
.swagger-section .swagger-ui-wrap .required,
.swagger-section .swagger-ui-wrap ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operation div.content div.sandbox_header input.submit,
.swagger-section .swagger-ui-wrap ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operation div.content form select[name='parameterContentType'] {
    border-radius: 8px
}

.swagger-section .swagger-ui-wrap ul#resources li.resource:hover div.heading h2 a,
.swagger-section .swagger-ui-wrap ul#resources li.resource.active div.heading h2 a,
.swagger-section .swagger-ui-wrap .model-signature .signature-nav .selected {
    color: white !important;
}

.swagger-section .swagger-ui-wrap .required {
    background-color: #464646
}



/* FINISH LIGHT MODE */
.gotham-font.chat-container .btn-control-xs,
.gotham-font .chat-container .btn-control-xs,
.gotham-font.chat-container .chat-search-input,
.gotham-font .chat-container .chat-search-input,
.gotham-font .chat-main .btn-control-md,
.gotham-font .create-chat-container .select-friends-btns .select-friends-cancel,
.gotham-font .create-chat-container .select-friends-btns .select-friends-save,
.gotham-font .details-btns-fixed button,
.gotham-font .details-btns button,
.gotham-font .details-container .details-input,
.gotham-font .details-header-container .details-input,
.gotham-font .dialog-container .dialog-input,
.gotham-font .game-item-container .game-btn,
.gotham-font .group-dialog .group-name-editor .group-name-input,
.gotham-font .group-dialog .group-name-editor .group-name-save,
.gotham-font .group-dialog .play-together-game-editor .group-name-input,
.gotham-font .group-dialog .play-together-game-editor .group-name-save {
    border-radius: 0px 0px 8px 8px;
}

.light-theme .dialog-container .dialog-input-container .dialog-input {
    width: 250px;
    right: 50px !important
}

#settings-container .left-navigation,
.light-theme .menu-vertical {
    border-radius: 8px
}

.catalog-container .search-container .input-group .search-input {
    border-radius: 8px
}
}

Supports dark and light themes, and plugins.
Tested with RoPro,BTRoblox,Roblox+, and RoGold installed. I cant assure this works with any other plugins although it probably does.

Screenshots:

If you have any suggestions, bugs, or anything else please let me know, and enjoy

[Qinrir (Quin)]

Its a stupidly good waste of time idea! Now i wont get hurt by seeing the roblox ui.

[NeoBuilds]

Almost everything looks better aside from these:

[pyxfluff (Pyx)]

I noticed that bad paddi g, I will fix it

[NeoBuilds]

No, not just padding. The whole thing looks bad with rounded corners because buttons have different sizes.

[pyxfluff (Pyx)]

I disabled that and added dark mode support for API sites, replace the CSS, and the UserStyle might update automatically, not sure how it works

[NeoBuilds]

I like how Roblox theme looks and I’ll use it, but there are some issues.

1. “Favorite” text missing
   

2. Unneded rounded corners
   

3. Every separator is rounded
   

4. Hover indicator on Inventory page is shown above corner
   
   This is how it should look like:
   

5. This thing is not rounded
   

6. Chat UI is bad
   

And so on.

There are also many issues with devforum and other Roblox websites.

[pyxfluff (Pyx)]

I’m using my own custom theme that fixes most of the DevForum errors, I will make the next update fix all of the tiny issues. What do you lot like about the chat btw?

[NeoBuilds]

@pyxfluff

What do you lot like about the chat btw?

Did you mean “what don’t you like about chat”? If so, then I don’t like rounded corners at the bottom and rounded separators. In most cases things that touch each other shouldn’t have rounded corners where they touch.

[pyxfluff (Pyx)]

Yeah, I just noticed the separators. I just fixed those, along with most all other things you said were bad.

[pyxfluff (Pyx)]

I decided to do this, and I was wondering if anybody would want to use it with the theme.

• Yes! This would be great!
• It needs some changes
• I dont want this in the theme

If you have any feedback on it lmk, I will publish it in a few days if I dont get a few people that say no to it

[JustAGameDeveloper1 (d5v)]

How do you install this for people who don’t trust links?

[EternalEthel (Eternity)]

You don’t. There isn’t a way to afaik. If other people downloaded it and no one is complaining about it being malicious, and it is made by a trusted and well known developer, it is safe.

[pyxfluff (Pyx)]

It’s just CSS, you can’t do anything bad with CSS I believe.

I do give the raw CSS though in case you want to install it yourself

[EternalEthel (Eternity)]

That seems more risky to be honest, raw CSS could be installed incorrectly. I don’t know anything about this but I just think that it might be a valid concern.

[2jammers]

You can’t do anything with CSS, it only styles HTML elements.

[EternalEthel (Eternity)]

I mean in the sense of accidentally turning elements invisible, setting colors to wacky colors, etc. not malicious, but just an annoying side effect if somewhere were to mess up when installing the CSS. But thanks!