40173


下記サイトで配布されているSlider Proというものを使用しています。

<http://bqworks.com/slider-pro/>

これを使用して表示させた画像の角を丸くするにはどうしたらいいのでしょうか？  
サイト内の画像は全てborder-radius:10pxで丸角にしているので、  
このスライダーで表示させている画像にも同じようにborder-radius:10pxを指定したいです。

このスライダーでは、下記のように記述して画像を表示させるので、  
（参考サイト：<http://gimmicklog.main.jp/jquery/340/>）

[code]

    <div id="任意名" class="slider-pro">
      <div class="sp-slides">
        <div class="sp-slide">
          <img class="sp-image" src="img/01.jpg" />
        </div>
        <div class="sp-slide">
          <img class="sp-image" src="img/02.jpg" />
        </div>
        <div class="sp-slide">
          <img class="sp-image" src="img/03.jpg" />
        </div>
      </div>
    </div>
    
[/code]

サイト全体のCSSで

[code]

    .sp-image {
      border-radius: 10px;
    }
    
[/code]

と指定してみましたが変化がありませんでした。（角がとがったまま）  
一応このスライダー用のデフォルトCSSにも同様に追記してみましたがダメでした。  
当方初心者のため、自分ではお手上げ状態で...  
このスライダーはjsで組まれているようなので、  
それもなにか関係しているのでしょうか...。（私はjsは全く分かりません...。）  
皆様のお力をお借りできますと幸いです。よろしくお願い致します。


CC BY-SA 3.0
2017-12-09T05:43:40.123
40149
2017-12-10T23:56:15.657
26570
question
javascript css html5
Slider Proでの角丸指定


slider-pro.cssにて`.slider-pro img.sp-image { border-radius: 0 !important;
}`という指定があるため詳細度で上書きされている状態です。  
cssの指定を`.slider-pro img.sp-image { border-radius: 10px !important;
}`とし、slider-pro.cssより後に読み込むように変更してみてください。


CC BY-SA 3.0
2017-12-10T23:56:15.657
40173
2017-12-10T23:56:15.657
17324
40149
answer