Fixes #1219 colored attached segment formatting

src/definitions/elements/segment.less

@@ -365,41 +365,69 @@
        Colors
 --------------------*/
 
-.ui.black.segment:not(.inverted):not(.attached) {
+.ui.black.segment:not(.inverted) {
   border-top: @coloredBorderSize solid @black;
-  border-radius: @coloredBorderRadius !important;
 }
-.ui.blue.segment:not(.inverted):not(.attached) {
+.ui.blue.segment:not(.inverted) {
   border-top: @coloredBorderSize solid @blue;
-  border-radius: @coloredBorderRadius !important;
 }
-.ui.green.segment:not(.inverted):not(.attached) {
+.ui.green.segment:not(.inverted) {
   border-top: @coloredBorderSize solid @green;
-  border-radius: @coloredBorderRadius !important;
 }
-.ui.orange.segment:not(.inverted):not(.attached) {
+.ui.orange.segment:not(.inverted) {
   border-top: @coloredBorderSize solid @orange;
-  border-radius: @coloredBorderRadius !important;
 }
-.ui.pink.segment:not(.inverted):not(.attached) {
+.ui.pink.segment:not(.inverted) {
   border-top: @coloredBorderSize solid @pink;
-  border-radius: @coloredBorderRadius !important;
 }
-.ui.purple.segment:not(.inverted):not(.attached) {
+.ui.purple.segment:not(.inverted) {
   border-top: @coloredBorderSize solid @purple;
-  border-radius: @coloredBorderRadius !important;
 }
-.ui.red.segment:not(.inverted):not(.attached) {
+.ui.red.segment:not(.inverted) {
   border-top: @coloredBorderSize solid @red;
-  border-radius: @coloredBorderRadius !important;
 }
-.ui.teal.segment:not(.inverted):not(.attached) {
+.ui.teal.segment:not(.inverted) {
   border-top: @coloredBorderSize solid @teal;
-  border-radius: @coloredBorderRadius !important;
 }
-.ui.yellow.segment:not(.inverted):not(.attached) {
+.ui.yellow.segment:not(.inverted) {
   border-top: @coloredBorderSize solid @yellow;
-  border-radius: @coloredBorderRadius !important;
+}
+
+.ui.black.segment:not(.inverted):not(.attached) {
+  border-top-left-radius: @coloredBorderRadius !important;
+  border-top-right-radius: @coloredBorderRadius !important;
+}
+.ui.blue.segment:not(.inverted):not(.attached) {
+  border-top-left-radius: @coloredBorderRadius !important;
+  border-top-right-radius: @coloredBorderRadius !important;
+}
+.ui.green.segment:not(.inverted):not(.attached) {
+  border-top-left-radius: @coloredBorderRadius !important;
+  border-top-right-radius: @coloredBorderRadius !important;
+}
+.ui.orange.segment:not(.inverted):not(.attached) {
+  border-top-left-radius: @coloredBorderRadius !important;
+  border-top-right-radius: @coloredBorderRadius !important;
+}
+.ui.pink.segment:not(.inverted):not(.attached) {
+  border-top-left-radius: @coloredBorderRadius !important;
+  border-top-right-radius: @coloredBorderRadius !important;
+}
+.ui.purple.segment:not(.inverted):not(.attached) {
+  border-top-left-radius: @coloredBorderRadius !important;
+  border-top-right-radius: @coloredBorderRadius !important;
+}
+.ui.red.segment:not(.inverted):not(.attached) {
+  border-top-left-radius: @coloredBorderRadius !important;
+  border-top-right-radius: @coloredBorderRadius !important;
+}
+.ui.teal.segment:not(.inverted):not(.attached) {
+  border-top-left-radius: @coloredBorderRadius !important;
+  border-top-right-radius: @coloredBorderRadius !important;
+}
+.ui.yellow.segment:not(.inverted):not(.attached) {
+  border-top-left-radius: @coloredBorderRadius !important;
+  border-top-right-radius: @coloredBorderRadius !important;
 }
 
 /*-------------------

src/themes/default/elements/segment.variables

@@ -84,7 +84,7 @@
 
 /* Colors */
 @coloredBorderSize: 2px;
-@coloredBorderRadius: 0em 0em @borderRadius @borderRadius;
+@coloredBorderRadius: @borderRadius;
 
 /* Ordinality */
 @secondaryBackground: #FAF9FA;