• ベストアンサー

CSS3で角丸の上部分を違う色にしたい

CSS3で角丸の上部分を違う色にしたいのですが、 どうすればいいでしょうか? 角丸でくくって、 色を変えた角丸の上部分に、タイトルとか入れたい、です

質問者が選んだベストアンサー

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

角丸であろうとなかろうと・・・ CSS2の border-top-color: border-left-color: border-right-color: border-bottom-color: の各プロパティで指定します。 ★8.5 ボーダーのプロパティ(Border properties) ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/box.html#border-properties ) いろは途中で変化します。 ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input+with_options )  ※オプションでCSS3を選択 でチェック済み ★タブは_に置換してある。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> _<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> _<title>サンプル</title> _<meta name="author" content="ORUKA1951"> _<meta http-equiv="Content-Style-Type" content="text/css"> _<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > _<link rel="START" href="../index.html"> _<style type="text/css"> <!-- div.section{ _border:solid 10px blue; _border-top-color:red; _border-radius: 1em; _position:relative; _margin-top:65px; } div.section>h2{ _position:absolute; _top:-65px; _width:22em; _left: 5em;; _line-height:40px; _background-color:red; _border-radius: 1em 1em 0 0; _text-align:center; } --> _</style> </head> <body> _<h1>サンプル</h1> _<div class="section"> __<h2>CSS3で角丸の上部分を違う色にしたい</h2> __<p>CSS3で角丸の上部分を違う色にしたいのですが、どうすればいいでしょうか?</p> __<p>角丸でくくって、色を変えた角丸の上部分に、タイトルとか入れたい、です</p> _</div> </body> </html>

re999
質問者

お礼

回答ありがとうございましたー

関連するQ&A