{"id":16302,"date":"2019-01-21T14:26:29","date_gmt":"2019-01-21T05:26:29","guid":{"rendered":"https:\/\/webst8.com\/code\/?p=16302"},"modified":"2024-08-18T08:32:03","modified_gmt":"2024-08-17T23:32:03","slug":"css-border","status":"publish","type":"post","link":"https:\/\/webst8.com\/code\/css-border\/","title":{"rendered":"CSS \u67a0\u7ddaborder\u306e\u4f7f\u3044\u65b9\u30fb\u8981\u7d20\u306b\u67a0\u7dda\u3092\u3064\u3051\u308b\u3084\u308a\u65b9"},"content":{"rendered":"

\u8981\u7d20\u306b\u67a0\u7dda\u3092\u5165\u308c\u308b\u306b\u306fborder:red solid 5px<\/span>\u306e\u3088\u3046\u306bborder\u30d7\u30ed\u30d1\u30c6\u30a3\u3067\u67a0\u7dda\u306e\u8272\uff0b\u67a0\u7dda\u306e\u7a2e\u985e\uff0b\u67a0\u7dda\u306e\u592a\u3055<\/strong>\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002<\/p>\n

\u4eca\u56de\u306f\u3001CSS\u306e\u67a0\u7ddaborder\u306e\u57fa\u672c\u3068\u6ce8\u610f\u70b9\u3084\u89d2\u306e\u4e38\u3055\u3092\u8a2d\u5b9a\u3059\u308bborder-radius\u306b\u3064\u3044\u3066\u8aac\u660e\u3057\u307e\u3059\u3002<\/p>\n

\"border\u3067\u67a0\u7dda\u306e\u8a2d\u5b9a\"
\n <\/p>\n

\n
SNS\u30d5\u30a9\u30ed\u30fc\u3088\u308d\u3057\u304f\u304a\u9858\u3044\u3057\u307e\u3059\uff01<\/p>\n

\u65b0\u3057\u3044\u30b3\u30f3\u30c6\u30f3\u30c4\u3084\u3001\u3088\u308a\u8a73\u7d30\u306a\u89e3\u8aac\u3092\u52d5\u753b\u3084\u30b7\u30e7\u30fc\u30c8\u52d5\u753b\u3067\u304a\u5c4a\u3051\u3057\u3066\u3044\u307e\u3059\u3002\u65e5\u3005\u306e\u60c5\u5831\u53ce\u96c6\u306b\u304a\u5f79\u7acb\u3066\u304f\u3060\u3055\u3044\u3002<\/span><\/div>\n

\"\"<\/a><\/div>\n
\"\"<\/a>
\n\"\"<\/a>
\n\"\"<\/a><\/div>\n<\/div>\n<\/p>\n

 <\/p>\n

\u67a0\u7dda border\u3067\u67a0\u7dda\u3092\u5165\u308c\u308b\u65b9\u6cd5<\/h2>\n

\u67a0\u7dda border\u306e\u57fa\u672c\u7684\u306a\u4f7f\u3044\u65b9<\/h3>\n

border\u306f\u3001\u8981\u7d20\u306b\u67a0\u7dda\u3092\u8a2d\u5b9a\u3059\u308bCSS\u30d7\u30ed\u30d1\u30c6\u30a3\u3067\u3059\u3002\u67a0\u7dda\u306e\u8272\u3001\u67a0\u7dda\u306e\u7a2e\u985e\u3001\u305d\u3057\u3066\u67a0\u7dda\u306e\u592a\u3055\u30683\u3064\u306e\u5024\u3092\u6307\u5b9a\u3057\u3066\u5229\u7528\u3057\u307e\u3059\u3002<\/p>\n

\"border\u3067\u67a0\u7dda\u306e\u8a2d\u5b9a\"
\n <\/p>\n

\u95a2\u9023<\/span>CSS\u306e\u66f8\u304d\u65b9\u30fb\u57fa\u672c\u30eb\u30fc\u30eb\u3010\u30a4\u30f3\u30e9\u30a4\u30f3\/\u5185\u90e8\/\u5916\u90e8\u3011<\/a>
\n <\/p>\n

\u300cborder:red solid 5px\u300d\u306e\u3088\u3046\u306b3\u3064\u306e\u5024\u306f\u534a\u89d2\u30b9\u30da\u30fc\u30b9\u3067\u533a\u5207\u308a\u307e\u3059\u3002\u9806\u4e0d\u540c\u3067\u3069\u308c\u304b\u3089\u5148\u306b\u66f8\u3044\u3066\u3082\u69cb\u3044\u307e\u305b\u3093\u3002<\/strong>
\n <\/p>\n

\u25a0\u8868\u793a\u4f8b
\n\"h1\u306b\u8d64\u8272\u30fb\u5b9f\u7dda\u30fb\u592a\u30555px\u306e\u67a0\u304c\u3064\u3044\u3066\u3044\u308b\"
\n <\/p>\n

\u25a0\u4e0a\u8a18\u4f8b\u306e\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9<\/p>\n

\r\n<!DOCTYPE html>\r\n<html>\r\n  <head>\r\n    <meta charset=\"utf-8\">\r\n    <title>\u306f\u3058\u3081\u3066\u306eCSS\u30bb\u30df\u30ca\u30fc<\/title>\r\n  <\/head>\r\n  <body>\r\n    <h1 style=\"border:red solid 5px;\">\u3053\u308c\u306f\u898b\u51fa\u3057\u3002\u8d64\u306e\u67a0\u5185\u306b\u3042\u308a\u307e\u3059\u3002<\/h1>  \r\n  <\/body>\r\n<\/html>\r\n<\/pre>\n
 <\/p>\n
\u6307\u5b9a\u3067\u304d\u308b\u5024\u306f\u3001\u4e3b\u306b\u4e0b\u8a18\u306e\u901a\u308a\u3067\u3059\u3002<\/p>\n\n\n\n\n\n
\u9805\u76ee<\/th>\n\u5185\u5bb9<\/th>\n<\/tr>\n
\u8272<\/td>\nred\u306a\u3069\u306e\u8272\u6307\u5b9a\u3001\u307e\u305f\u306f#ff0000\u306a\u3069\u306e16\u9032\u6570\u8868\u8a18<\/td>\n<\/tr>\n
\u7a2e\u985e<\/td>\n\n
    \n
  • \u306a\u3057(\u521d\u671f\u5024)\u300cnone\u300d<\/li>\n
  • 1\u672c\u306e\u5b9f\u7dda\u300csolid\u300d<\/li>\n
  • 2\u672c\u306e\u5b9f\u7dda\u300cdouble\u300d<\/li>\n
  • \u70b9\u7dda\u300cdotted\u300d<\/li>\n
  • \u7834\u7dda\u300cdashed\u300d\u306a\u3069<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n
\u67a0\u7dda\u306e\u592a\u3055<\/td>\n2px\u306a\u3069\u3000px\u3067\u8a2d\u5b9a(%\u306f\u4e0d\u53ef)<\/td>\n<\/tr>\n<\/table>\n
 <\/p>\n
\u4f8b \u67a0\u7dda\u306e\u7a2e\u985e\u304c\u5b9f\u7dda solid
\n\"\u67a0\u7dda\u306e\u7a2e\u985e
\n <\/p>\n
\u4f8b \u67a0\u7dda\u306e\u7a2e\u985e\u304c\u70b9\u7dda dotted
\n\"\u67a0\u7dda\u306e\u7a2e\u985e
\n <\/p>\n
\u4f8b \u67a0\u7dda\u306e\u7a2e\u985e\u304c\u7834\u7dda dashed
\n\"\u67a0\u7dda\u306e\u7a2e\u985e
\n <\/p>\n
\u4f8b \u67a0\u7dda\u306e\u7a2e\u985e\u304c\u4e8c\u91cd\u7dda double
\n\"\u67a0\u7dda\u306e\u7a2e\u985e
\n 
\n <\/p>\n
\u67a0\u7dda\u306e\u8272\u30fb\u7a2e\u985e\u30fb\u592a\u3055\u3092\u500b\u5225\u306b\u6307\u5b9a\u3059\u308b\u5834\u5408<\/h3>\n
border\u3067\u306f\u3001\u8272\u30fb\u7a2e\u985e\u30fb\u592a\u3055\u30683\u3064\u306e\u5024\u3092\u307e\u3068\u3081\u3066\u8a2d\u5b9a\u3057\u307e\u3057\u305f\u304c\u30013\u3064\u306e\u5024\u3092\u305d\u308c\u305e\u308c\u500b\u5225\u306b\u8a2d\u5b9a\u3059\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002
\n <\/p>\n
\u5404\u8a2d\u5b9a\u5024\u3092\u500b\u5225\u306b\u6307\u5b9a\u3059\u308b\u5834\u5408\u306f\u3001\u300cborder-color\u300d\u300cborder-style\u300d\u300cborder-width\u300d\u3067\u305d\u308c\u305e\u308c\u8a2d\u5b9a\u3057\u307e\u3059\u3002
\n <\/p>\n\n\n\n\n\n
\u9805\u76ee<\/th>\n\u5185\u5bb9<\/th>\n<\/tr>\n
\u67a0\u7dda\u306e\u8272\uff1aborder-color <\/td>\n\u67a0\u7dda\u306e\u8272\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002
\n\u4f8b border-color:red;\n<\/td>\n<\/tr>\n
\u67a0\u7dda\u306e\u7a2e\u985e\uff1aborder-style<\/td>\n\u67a0\u7dda\u306e\u7a2e\u985e\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002
\n\u4f8b border-style:solid;\n<\/td>\n<\/tr>\n
\u67a0\u7dda\u306e\u592a\u3055\uff1aborder-width<\/td>\n\u67a0\u7dda\u306e\u592a\u3055\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002
\n\u4f8b border-width:5px\n<\/td>\n<\/tr>\n<\/table>\n
 <\/p>\n
\u25a0\u8868\u793a\u4f8b
\n\"border-style\u3001border-width\u3001border-color\u3092\u3053\u3053\u306b\u8a2d\u5b9a\u3057\u305f\u8868\u793a\u306e\u4f8b\"
\n <\/p>\n
\u25a0\u4e0a\u8a18\u306e\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9<\/p>\n
<h1 style=\"border-color:red;border-style:solid;border-width:5px\">\u3053\u308c\u306f\u898b\u51fa\u3057<\/h1><\/pre>\n
 
\n <\/p>\n
border\u3067\u8981\u7d20\u306e\u5404\u8fba\u3092\u76f4\u63a5\u6307\u5b9a\u3059\u308b\u65b9\u6cd5<\/h3>\n
\u56db\u89d2\u5f62\u306e\u8fba\u3092\u6307\u5b9a\u3057\u3066\u7279\u5b9a\u306e\u8fba\u306b\u67a0\u7dda\u3092\u8a2d\u5b9a\u3059\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059<\/strong>\u3002
\n <\/p>\n
\u5404\u8fba\u3092\u6307\u5b9a\u3059\u308b\u5834\u5408\u306f\u3001border\u306e\u4ee3\u308f\u308a\u306b\u300cborder-xxx(\u8fba)\u300d\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n\n\n\n
\u9805\u76ee<\/th>\n\u5185\u5bb9<\/th>\n<\/tr>\n
border-left:\u8272 \u7a2e\u985e \u592a\u3055; <\/td>\n\u8981\u7d20\u306e\u5de6\u5074\u306e\u67a0\u7dda\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002
\n\u4f8b border-left:red solid 5px;
\n\"\u5de6\u5074\u306e\u67a0\n<\/td>\n<\/tr>\n
border-right:\u8272 \u7a2e\u985e \u592a\u3055;<\/td>\n\u8981\u7d20\u306e\u53f3\u5074\u306e\u67a0\u7dda\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002
\n\u4f8b border-right:red solid 5px;
\n\"\u53f3\u5074\u306e\u67a0\n<\/td>\n<\/tr>\n
border-top:\u8272 \u7a2e\u985e \u592a\u3055; <\/td>\n\u8981\u7d20\u306e\u4e0a\u5074\u306e\u67a0\u7dda\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002
\n\u4f8b border-top:red solid 5px;
\n\"\u4e0a\u5074\u306e\u67a0<\/td>\n<\/tr>\n
borderg-bottom:\u8272 \u7a2e\u985e \u592a\u3055; <\/td>\n\u8981\u7d20\u306e\u4e0b\u5074\u306e\u67a0\u7dda\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002
\n\u4f8b border-bottom:red solid 5px;
\n\"\u4e0b\u5074\u306e\u67a0<\/td>\n<\/tr>\n<\/table>\n
 
\n <\/p>\n
\u67a0\u306e\u89d2\u306e\u4e38\u3055\u3092\u6307\u5b9a\u3059\u308bborder-radius<\/h2>\n
border-radius\u306f\u3001\u67a0\u7dda\u304a\u3088\u3073\u8981\u7d20(HTML\u30bf\u30b0)\u306e\u89d2\u306e\u4e38\u3055\u3092\u6307\u5b9a\u3059\u308bCSS\u30d7\u30ed\u30d1\u30c6\u30a3\u3067\u3059\u3002
\n <\/p>\n
border\u30d7\u30ed\u30d1\u30c6\u30a3\u3068\u5408\u308f\u305b\u3066\u5229\u7528\u3059\u308b\u3053\u3068\u3067border-radius\u3092\u5229\u7528\u3059\u308b\u3068border\u3067\u4f5c\u3063\u305f\u67a0\u7dda\u306e\u89d2\u3092\u4e38\u304f\u3059\u308b\u4e8b\u304c\u3067\u304d\u307e\u3059\u3002
\n <\/p>\n
border-radius:30px \u3068\u3057\u305f\u5834\u5408\u3001\u3059\u3079\u3066\u306e\u89d2\u304c30px\u306b\u306a\u308a\u307e\u3059\u3002
\n\"border-radius:30px\"
\n <\/p>\n
\u25a0\u4e0a\u8a18\u306e\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n  <head>\r\n    <meta charset=\"utf-8\">\r\n    <title>\u306f\u3058\u3081\u3066\u306eCSS<\/title>\r\n  <\/head>\r\n  <body>\r\n    <div style=\"width:300px;height:300px;border:red solid 2px;border-radius: 30px;\">\r\n\r\n    <\/div>\r\n  <\/body>\r\n<\/html><\/pre>\n
 <\/p>\n
border-radius:50%\u3068\u6307\u5b9a\u3057\u305f\u5834\u5408\u306f\u300150%=\u5186\u306e\u534a\u5f84\u3067\u4e0b\u8a18\u306e\u3088\u3046\u306b\u5186\u306b\u306a\u308a\u307e\u3059\u3002
\n\"border-radius:50%\"
\n <\/p>\n
\u25a0\u4e0a\u8a18\u306e\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n  <head>\r\n    <meta charset=\"utf-8\">\r\n    <title>\u306f\u3058\u3081\u3066\u306eCSS<\/title>\r\n  <\/head>\r\n  <body>\r\n    <div style=\"width:300px;height:300px;border:red solid 2px;border-radius: 50%;\">\r\n    <\/div>\r\n  <\/body>\r\n<\/html><\/pre>\n
 <\/p>\n
\u307e\u305f\u3001border-top-left-radius\uff08\u5de6\u4e0a\u306e\u7b87\u6240\uff09:xxx\u306a\u3069\u306e\u3088\u3046\u306b\u5834\u6240\u3092\u6307\u5b9a\u3059\u308b\u3068\u4e0b\u8a18\u306e\u3088\u3046\u306b\u5de6\u4e0a\u3060\u3051\u4e38\u304f\u3059\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002
\n\"border-top-left-radius:50%\"
\n <\/p>\n
\u25a0\u4e0a\u8a18\u306e\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n  <head>\r\n    <meta charset=\"utf-8\">\r\n    <title>\u306f\u3058\u3081\u3066\u306eCSS<\/title>\r\n  <\/head>\r\n  <body>\r\n    <div style=\"width:300px;height:300px;border:red solid 2px;border-top-left-radius: 50%;\">\r\n    <\/div>\r\n  <\/body>\r\n<\/html>\r\n<\/pre>\n
 <\/p>\n
\u307e\u305f\u3001border-radius\u306f\u3001\u67a0\u7dda\u3060\u3051\u3067\u306a\u304f\u753b\u50cf\u3084\u8981\u7d20\u306b\u5bfe\u3057\u3066\u3082\u6307\u5b9a\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002
\n <\/p>\n
\u25a0\u6b63\u65b9\u5f62\u306e\u753b\u50cf\u306bborder-radius:50%\u3092\u9069\u7528\u3057\u305f\u4f8b
\n\"border-radius\u8a2d\u5b9a\u3042\u308a\u306e\u5834\u5408\u306e\u6b63\u65b9\u5f62\u306e\u753b\u50cf\"
\n <\/p>\n
\u25a0\u4e0a\u8a18\u306e\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n  <head>\r\n    <meta charset=\"utf-8\">\r\n    <title>\u306f\u3058\u3081\u3066\u306eCSS<\/title>\r\n  <\/head>\r\n  <body>\r\n    <h2>border-radius\u8a2d\u5b9a\u306a\u3057\u306e\u5834\u5408\u306e\u6b63\u65b9\u5f62\u306e\u753b\u50cf<\/h2>\r\n    <p>\r\n      <img src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2020\/01\/bird-hollow.jpg\" alt=\"\">\r\n    <\/p>\r\n    <h2>border-radius\u8a2d\u5b9a\u3042\u308a\u306e\u5834\u5408\u306e\u6b63\u65b9\u5f62\u306e\u753b\u50cf<\/h2>\r\n      <p>\r\n        <img src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2020\/01\/bird-hollow.jpg\" alt=\"\" style=\"border-radius:50%;\">\r\n      <\/p>\r\n  <\/body>\r\n<\/html><\/pre>\n
 <\/p>\n
\u25a0\u6b63\u65b9\u5f62\u306ediv\u8981\u7d20\u306bborder-radius:50%\u3092\u9069\u7528\u3057\u305f\u4f8b
\n\"\u6b63\u65b9\u5f62\u306ediv\u8981\u7d20\u306bborder-radius:50%\u3092\u9069\u7528\u3057\u305f\u4f8b\"
\n <\/p>\n
\u25a0\u4e0a\u8a18\u306e\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n  <head>\r\n    <meta charset=\"utf-8\">\r\n    <title>\u306f\u3058\u3081\u3066\u306eCSS<\/title>\r\n  <\/head>\r\n  <body>\r\n    <h2>border-radius\u8a2d\u5b9a\u306a\u3057\u306e\u5834\u5408\u306e\u6b63\u65b9\u5f62<\/h2>\r\n    <div style=\"background-color:pink;width:150px;height:150px;\">\r\n    <\/div>\r\n    <h2>border-radius\u8a2d\u5b9a\u3042\u308a\u306e\u5834\u5408\u306e\u6b63\u5186<\/h2>\r\n    <div style=\"background-color:pink;width:150px;height:150px;border-radius:50%;\">\r\n    <\/div>\r\n  <\/body>\r\n<\/html>\r\n<\/pre>\n
 <\/p>\n
\u203b\u306a\u304a\u3001\u9577\u65b9\u5f62\u306e\u5834\u5408\u306f\u3001\u6b63\u5186\u3067\u306f\u306a\u304f\u3001\u6955\u5186\u306b\u306a\u308a\u307e\u3059\u3002
\n 
\n <\/p>\n
border\u8a2d\u5b9a\u6642\u306e\u30dc\u30c3\u30af\u30b9\u5927\u304d\u3055\u306e\u7b97\u51fa\u8a08\u7b97border-box<\/h2>\n
\u67a0\u7ddaborder(\u3084\u5185\u90e8\u4f59\u767dpadding)\u3092\u8a2d\u5b9a\u3059\u308b\u969b\u306b\u3001\u67a0\u7dda\u306e\u5927\u304d\u3055\u3092\u6a2a\u5e45\u3084\u9ad8\u3055\u306b\u542b\u3081\u308b\u304b\u3069\u3046\u304b\u306e\u7b97\u51fa\u65b9\u6cd5\u3092\u6307\u5b9a\u3059\u308b\u30d7\u30ed\u30d1\u30c6\u30a3\u3067\u300cbox-sizing:border-box\u300d\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n
\"CSS
\n <\/p>\n
\u25a0box-sizing\u30d7\u30ed\u30d1\u30c6\u30a3\u3067\u4f7f\u3046\u8a2d\u5b9a\u5024\u3068\u610f\u5473<\/p>\n\n\n\n\n
\u9805\u76ee<\/th>\n\u5185\u5bb9<\/th>\n<\/tr>\n
box-sizing:content-box<\/td>\n\u67a0\u7dda\u300cborder\u300d\u3084\u5185\u90e8\u4f59\u767d\u300cpadding\u300d\u3092\u6a2a\u5e45\u3068\u9ad8\u3055\u306b\u542b\u3081\u306a\u3044\uff08\u521d\u671f\u5024\uff09<\/td>\n<\/tr>\n
box-sizing:border-box<\/td>\n\u67a0\u7dda\u300cborder\u300d\u3084\u5185\u90e8\u4f59\u767d\u300cpadding\u300d\u3092\u6a2a\u5e45\u3068\u9ad8\u3055\u306b\u542b\u3081\u308b<\/td>\n<\/tr>\n<\/table>\n
 <\/p>\n
\u25a0\u8868\u793a\u4f8b
\n
\n