Make Cards border blue to grey

[Community Alums]

HI

I am not able to make Card border blue to grey.

How can I achieve this?

[Unique45 · Accepted solution]

@Community Alums 

Change highlighted CSS property. 

update - border : 1px solid grey;

[Community Alums]

Can anyone help?

Thanks in advance!

[Unique45]

Hello @Community Alums ,

Follow below steps to achieve this:
1) Click 'ctrl+right' on the widget and open widget editor.

2) Change CSS property for card border:

[Community Alums]

HI,

I am not able to find CSS property named card border.

Please find CSS Script below.

$text-primary : #181A1F !default;

$background-primary : #ffffff !default;
$background-secondary : #f6f6f8 !default;
$background-tertiary : #F0F1F5 !default;

$sp-panel-box-shadow : 0 4px 8px 0 rgba(23, 40, 52, 0.08) !default;

$sp-space--lg: 16px !default;
$sp-space--xl : 24px !default;
$padding-base-vertical: 6px !default;

$border-primary : #8790A1 !default;
$border-secondary : #ACB2BE !default;
$border-tertiary : #DADDE2 !default;

$select-primary: #007b58 !default;

$headings-font-weight: 600 !default;
$divider: #F6F7F7 !default;

/* Double focus ring on cards */
#tabpanel-card-06d3df67c3053010069aec4b7d40dd70 div:focus {
box-shadow: !important;
border: none;
}

mark {
background-color: $brand-primary-lightest;
color: $text-primary;
padding: 0;
}

.m-r-auto {
margin-right: auto;
}

.p-v-2 {
padding: $sp-space--lg 0;
}

.browse-content-container {
.toggle {
color: $gray-darker;

i:not(.active):hover {
color: $list-group-link-heading-color;
}
}

.fa {
border: 4px solid transparent;
}

.fa.active {
color: $select-primary;
}

.view-controls {
margin-bottom: 5px;
}

.filter-padding {
padding: 0 $sp-space--lg;
}

.item-fitlers-disable {
opacity: 50%;
pointer-events: none;
}

.grid-margin {
margin-top: $sp-space--xl;
}

.title-item-filters {
width: 100%;
flex: 1 0 auto;
display: flex;
align-items: flex-end;
justify-content: flex-end;

select {
width: 140px;
}

.filter-search {
width: max-content;
display: flex;
align-items: flex-end;
margin-left: $sp-space--lg;

div[widget="widget"][sn-atf-area="AIS Topic Search"] {
padding: 0 $sp-space--lg;

.input-group {
width: 248px;
}

div.dropdown-menu {
width: 100%;
}
}
}
}

@media (min-width:62em) and (max-width: 75em) {
.title-item-filters {
select {
width: 120px;
}
}
}

@media (min-width:38em) and (max-width: 48em) {
.title-item-filters {
align-items: initial;

select {
width: 10rem;
}

.filter-padding {
padding-right: 0;
}

.filter-search {
gap: $sp-space--lg;

div[widget="widget"][sn-atf-area="AIS Topic Search"] {
padding: 0;

.input-group {
width: 20rem;
}
}

.view-controls {
.toggle {
display: flex;
}
}
}
}
}

@media (max-width: 38em), (min-width:48em) and (max-width: 62em) {
.box-header-title {
flex-wrap: wrap;

&.spellcheck-container {
flex-direction: column;
}
}

.title-item {
width: 100%;
margin-bottom: 20px;
}

.title-item-filters {
justify-content: flex-start !important;
width: 100%;
flex-direction: column;
align-items: initial !important;

select {
width: 100%;
margin-bottom: $sp-space--lg;
}

.filter-search {
display: block;
padding: 0;
margin-left: 0;
width: auto;

div[widget="widget"][sn-atf-area="AIS Topic Search"] {
padding: 0;

.input-group {
width: 100%;
}

div.dropdown-menu {
width: 100%;
}
}
}
}

.view-controls {
display: none;
}

.flex-mobile {
width: 100%;
}

.filter-padding {
padding: 0;
}
}

.box-header-title {
display: flex;
margin: 0 10px;
flex-wrap: wrap;

.search-results-container {
button.btn-link {
padding: 0;
}
}

.clear-search-container {
margin-left: auto;

button.btn.btn-link {
padding: 0;
}
}
}

.label-padding {
padding-right: 5px;
}

.title-item {
display: flex;
align-items: center;
margin-right: 10px;
word-break: break-word;
}

.browse-elevation {
background: $background-primary;
padding: 0.4rem 1.4rem 1rem 1.4rem;
border-radius: $border-radius-large;
-webkit-box-shadow: $sp-panel-box-shadow;
box-shadow: $sp-panel-box-shadow;

.flex-item-card {
border: 1px solid $border-tertiary;
border-radius: $border-radius-base;
margin: 10px;
max-width: 500px;
position: relative;
display: flex;
}

.flex-item-card:hover {
box-shadow: 0rem 0.2rem 1rem #E5E5E5;
}

.flex-display {
display: flex;
height: 100%;
flex-grow: 1;

>div {
flex-grow: 1;
}
}

.list-view-block {
display: block;
}

.list-view {
flex-direction: column;
flex-grow: 1;
max-width: none;

.flex-display {
flex-direction: column;
}
}

.btn-loadmore {
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 20px;
display: block;
color: $text-primary;
background: $background-primary;
border-color: $border-tertiary;
}

.btn-loadmore:hover {
background: $background-secondary;
}

.btn-loadmore:active {
background: $background-tertiary;
}

/* IE 10-11 specific Class to override */
@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
.flex-item-card {
width: 350px;
max-width: 350px;
flex: 1 0 100%;
}

.grid-test-auto-wrap {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}

.list-view {
max-width: none;
width: auto;

.text-ellipsis {
width: 700px;
}
}

.fa.active {
outline-color: $select-primary;
}
}
}

.browse-elevation-mobile {
background: $background-primary;
padding: 0 1rem 1rem 1rem;
border-bottom: 12px solid $divider;
font-size: 14px;

h3 {
font-size: 1.25rem !important;
font-weight: bold;
}

.flex-item-card {
display: flex;
flex-direction: column;
align-items: stretch;
border-bottom: 1px solid #EAEAEA;
position: relative;
}

.flex-display {
display: flex;
flex-direction: column;
align-items: stretch;
}

.box-header-title {
margin: 0;
}

.title-item-filters {
.form-inline:first-of-type {
margin-bottom: $sp-space--lg;
}
}

.btn-loadmore {
width: 90%;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
display: block;
}

.filter-padding {
padding-left: 0;
}

.label-padding {
font-weight: $headings-font-weight;
}

.full-width-drop-down {
width: 100%;
border: 1px solid $border-tertiary;
border-radius: 5px !important;
font-weight: $headings-font-weight;
}

.select2-container {

/* need to over ride the important style of mesp which already has important for a11y reasons*/
#s2id_autogen1,
#s2id_autogen2 {
width: 100% !important;
height: 100% !important;
}

.select2-choice {
/* Tappable areas on mobile should be atleast 48px in height*/
min-height: 48px;

span[role="text"].select2-chosen {
padding-top: 1rem;
padding-bottom: 1rem;
}
}
}

.select2-reference .select2-arrow,
.select2-choice .select2-arrow {
/* need to over ride the important style of mesp which already has important */
right: 0.5rem !important;
padding-top: 8px;
}

.select2-container .select2-choice .select2-arrow b:before {
content: "\f107";
font-family: FontAwesome;
}

.select2-container .select2-choice {
padding-bottom: 0;
/* need to over ride the important style of mesp which already has important */
box-shadow: none !important;
}

.select2-container .select2-choice .select2-chosen {
font-size: 14px;
}

.grid-test-auto-wrap {
grid-template-columns: repeat(auto-fit, minmax(16.25rem, 1fr));
}

.content-align-center {
min-height: 200px;
}

.item-fitlers-disable {
display: none;
}
}

.content-align-center {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 300px;
text-align: center;

&.expand-search-container {
min-height: 134px;
background-color: $background-tertiary;
margin: $sp-space--xl 10px $sp-space--sm 10px;
padding: $padding-base-horizontal;
border-radius: $border-radius-large;

.expand-search-message {
color: $text-secondary;
margin-bottom: $sp-space--sm;
}

a {
color: $link-color;
}
}
}

.grid-test-auto-wrap {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr));
}

.search-no-results-container {
margin: $sp-space--xl;
padding: $sp-space--lg;

i.fa.fa-search {
font-size: 2 * $font-size-xl;
color: $text-tertiary;
margin-bottom: $sp-space--md;
}

p {
color: $text-secondary;
font-size: $font-size-base;
margin-bottom: $sp-space--md;
}
}
}

.skeleton-loading {
padding: 10px;
$loader-line-height: 15px;

.text-items {
width: 100%;
}

.title-loader {
height: $loader-line-height;
width: 95%
}

.description-loader {
height: $loader-line-height;
width: 70%
}

.additional-info-loader {
height: $loader-line-height;
width: 40%
}

.badge-loader {
height: 25px;
width: 50%
}

.empty {
height: 30px;
}

.skeleton-loader {
box-sizing: border-box;
animation: progress 2s ease-in-out infinite;
background: rgb(239, 241, 246) no-repeat;
background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
background-size: 200px 100%;
border-radius: 5px;
display: inline-block;
margin-bottom: 6px;

&:after,
&:before {
box-sizing: border-box;
}
}
}
@media (max-width : 350px) {
.browse-content-container {
.grid-test-auto-wrap {
grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
}
}
}

@keyframes progress {
0% {
background-position: -200px 0;
}

100% {
background-position: calc(200px + 100%) 0;
}
}

[jagadeeshsnow]

@Community Alums 

.flex-item-card {
display: flex;
flex-direction: column;
align-items: stretch;
border-bottom: 1px solid #EAEAEA;
position: relative;
}

in above code replace : #EAEAEA with : #808080
if that does not work try replacing below color codes one by one with :#808080

$border-primary : #8790A1 !default;
$border-secondary : #ACB2BE !default;
$border-tertiary : #DADDE2 !default;

$select-primary: #007b58 !default;