无法覆盖CSS属性

Question

Hi I have provided with a project which has many CSS files included. with following structure

<link href="./Premium Nutritional Supplements_files/jquery.owl.carousel.css" rel="stylesheet" type="text/css" media="all">
  <link href="./Premium Nutritional Supplements_files/jquery.fancybox.css" rel="stylesheet" type="text/css" media="all">
  <link href="./Premium Nutritional Supplements_files/jquery.fancybox-buttons.css" rel="stylesheet" type="text/css" media="all">

  <link href="./Premium Nutritional Supplements_files/bootstrap.min.css" rel="stylesheet" type="text/css" media="all">
  <link href="./Premium Nutritional Supplements_files/bootstrap-modal.css" rel="stylesheet" type="text/css" media="all">
  <link href="./Premium Nutritional Supplements_files/bootstrap-switch.css" rel="stylesheet" type="text/css" media="all">

  <link href="./Premium Nutritional Supplements_files/kumi.global.css" rel="stylesheet" type="text/css" media="all">
  <link href="./Premium Nutritional Supplements_files/kumi.style.scss.css" rel="stylesheet" type="text/css" media="all">
  <link href="./Premium Nutritional Supplements_files/kumi.media.css" rel="stylesheet" type="text/css" media="all">
   <link href="./Premium Nutritional Supplements_files/custom.css" rel="stylesheet" type="text/css" media="all">

I have included custom.css at the end to override a property

.post-author-image{
    border-radius: 50%;
}

in kumi.global.css which is above custom.css and contains

div, input, select, textarea, span, img, table, td, th, p, a, button, ul, li {
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 0!important;
}

But I m unable to override border-radius in custom.css. How can I override border-radius from 0 to 50%?

Answer 1

using !important should do it since custom.css loads at last.

.post-author-image{
    border-radius: 50% !important;
}

!important gives css a higher priority and since "kumi" css has !important , no matter where you put your custom css, "kumi" css will take effect.

It is generally a bad idea to use !important especially when you are selecting a generic dom element which is in your case with "kumi css" where !important is used for almost everything.

If possible, a better solution will be to remove !important from "Kumi" css

Answer 2

Woah. I hope that you can change kumi.global.css, because that !important tag is put to horrific use. It almost seems like a hard-artillery approach to banning use of border-radius.

Here's the direct solution:

.post-author-image{
    border-radius: 50% !important;
}

But I hope you're able to remove that tag from the global file.