Slider Proでの角丸指定

Question

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

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

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

このスライダーでは、下記のように記述して画像を表示させるので（参考サイト）

<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>
```サイト全体のCSSで
```css
.sp-image {
  border-radius: 10px;
}
```と指定してみましたが変化がありませんでした。（角がとがったまま）
一応このスライダー用のデフォルトCSSにも同様に追記してみましたがダメでした。
当方初心者のため、自分ではお手上げ状態で...
このスライダーはjsで組まれているようなので、
それもなにか関係しているのでしょうか...。（私はjsは全く分かりません...。）
皆様のお力をお借りできますと幸いです。よろしくお願い致します。

Comments

[yoshinavi]

画像も用意されたものが表示や動作に問題なければJSは一応問題無いかと思います。クロームで参考サイトを見て、「F12」ボタンで開発者ツールを使用し、該当箇所のCSSを「kei344」さんご提案のコードで試して見て、ご自分のサイトの該当箇所を修正してみてください。

Answer 1

別サイトで解決方法が得られましたので共有させていただきます。
https://ja.stackoverflow.com/a/40173/26570

Comments

[yuinana]

とっても参考になりました。ありがとうございます。

Answer 2

提示されているURLのサンプルであれば、下記CSSを追加すれば丸くなります。

.slider-pro img.sp-image, .slider-pro img.sp-thumbnail {
    border-radius: 1em !important;
}

【開発者ツールを使おう！ カスタマイズするphpファイルを探す-その1 | RYUS blog】
http://ryus.co.jp/blog/customize-php-search-1/

【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
http://www.buildinsider.net/web/chromedevtools/01

【第1回　詳説：デベロッパーツールの使い方：Google Chrome版Firebug：デベロッパーツール取扱説明書｜gihyo.jp … 技術評論社】
http://gihyo.jp/dev/feature/01/devtools/0001?page=2

Comments

[ta539tg70]

ご回答ありがとうございます。
ご教示いただいたコードをコピペして試してみましたが変化ありませんでした。なぜできないのか理由は分からないのですが...。

[kei344]

調べ方のリンクを提示しているので、それで調べてみてください。