{"id":318,"date":"2013-09-04T07:51:00","date_gmt":"2013-09-04T07:51:00","guid":{"rendered":"https:\/\/kiencang.net\/2013\/09\/04\/cach-su-dung-duong-vien-border-trong-css\/"},"modified":"2022-08-01T23:39:12","modified_gmt":"2022-08-01T16:39:12","slug":"cach-su-dung-duong-vien-border-trong-css","status":"publish","type":"post","link":"https:\/\/kiencang.net\/cach-su-dung-duong-vien-border-trong-css\/","title":{"rendered":"C\u00e1ch s\u1eed d\u1ee5ng \u0111\u01b0\u1eddng vi\u1ec1n (border) trong CSS"},"content":{"rendered":"\n<p>\u0110\u01b0\u1eddng vi\u1ec1n l\u00e0 y\u1ebfu t\u1ed1 g\u00e2y n\u1ed5i b\u1eadt kh\u00e1 quan tr\u1ecdng \u2013 n\u00f3 t\u1ea1o ranh gi\u1edbi v\u1edbi nh\u1eefng ph\u1ea7n c\u00f2n l\u1ea1i c\u1ee7a trang web. H\u00f4m nay ch\u00fang ta c\u00f9ng xem th\u1eed CSS l\u00e0m \u0111\u01b0\u1ee3c nh\u1eefng g\u00ec v\u1edbi \u0111\u01b0\u1eddng vi\u1ec1n.<\/p>\n\n\n\n<p>Ba thu\u1ed9c t\u00ednh quan tr\u1ecdng c\u1ee7a \u0111\u01b0\u1eddng vi\u1ec1n \u0111\u00f3 l\u00e0:<\/p>\n\n\n\n<ul><li>K\u00edch th\u01b0\u1edbc \u0111\u01b0\u1eddng vi\u1ec1n;<\/li><li>M\u00e0u s\u1eafc c\u1ee7a \u0111\u01b0\u1eddng vi\u1ec1n;<\/li><li>Ki\u1ec3u \u0111\u01b0\u1eddng vi\u1ec1n;<\/li><\/ul>\n\n\n\n<p>Gi\u1edd ch\u00fang ta s\u1ebd l\u1ea7n l\u01b0\u1ee3t \u0111i v\u00e0o t\u1eebng c\u00e1i c\u1ee5 th\u1ec3\u2026<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_60 counter-hierarchy ez-toc-counter ez-toc-light-blue ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title \" >M\u1ee5c l\u1ee5c<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\" role=\"button\"><label for=\"item-6577d72320dbf\" ><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input aria-label=\"Toggle\" aria-label=\"item-6577d72320dbf\"  type=\"checkbox\" id=\"item-6577d72320dbf\"><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/kiencang.net\/cach-su-dung-duong-vien-border-trong-css\/#1_Kich_thuoc_duong_vien\" title=\"1. K\u00edch th\u01b0\u1edbc \u0111\u01b0\u1eddng vi\u1ec1n\">1. K\u00edch th\u01b0\u1edbc \u0111\u01b0\u1eddng vi\u1ec1n<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/kiencang.net\/cach-su-dung-duong-vien-border-trong-css\/#2_Mau_sac_cua_duong_vien\" title=\"2. M\u00e0u s\u1eafc c\u1ee7a \u0111\u01b0\u1eddng vi\u1ec1n\">2. M\u00e0u s\u1eafc c\u1ee7a \u0111\u01b0\u1eddng vi\u1ec1n<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/kiencang.net\/cach-su-dung-duong-vien-border-trong-css\/#3_Kieu_duong_vien\" title=\"3. Ki\u1ec3u \u0111\u01b0\u1eddng vi\u1ec1n\">3. Ki\u1ec3u \u0111\u01b0\u1eddng vi\u1ec1n<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/kiencang.net\/cach-su-dung-duong-vien-border-trong-css\/#4_Bon_phia_cua_duong_vien\" title=\"4. B\u1ed1n ph\u00eda c\u1ee7a \u0111\u01b0\u1eddng vi\u1ec1n\">4. B\u1ed1n ph\u00eda c\u1ee7a \u0111\u01b0\u1eddng vi\u1ec1n<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/kiencang.net\/cach-su-dung-duong-vien-border-trong-css\/#5_Van_de_gia_tang_kich_thuoc_cua_div_va_cac_the_noi_chung_khi_su_dung_duong_vien\" title=\"5. V\u1ea5n \u0111\u1ec1 gia t\u0103ng k\u00edch th\u01b0\u1edbc c\u1ee7a div v\u00e0 c\u00e1c th\u1ebb n\u00f3i chung khi s\u1eed d\u1ee5ng \u0111\u01b0\u1eddng vi\u1ec1n\">5. V\u1ea5n \u0111\u1ec1 gia t\u0103ng k\u00edch th\u01b0\u1edbc c\u1ee7a div v\u00e0 c\u00e1c th\u1ebb n\u00f3i chung khi s\u1eed d\u1ee5ng \u0111\u01b0\u1eddng vi\u1ec1n<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/kiencang.net\/cach-su-dung-duong-vien-border-trong-css\/#6_Bo_tron_goc_cho_duong_vien\" title=\"6. Bo tr\u00f2n g\u00f3c cho \u0111\u01b0\u1eddng vi\u1ec1n\">6. Bo tr\u00f2n g\u00f3c cho \u0111\u01b0\u1eddng vi\u1ec1n<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Kich_thuoc_duong_vien\"><\/span>1. K\u00edch th\u01b0\u1edbc \u0111\u01b0\u1eddng vi\u1ec1n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>V\u1ec1 quy \u0111\u1ecbnh k\u00edch th\u01b0\u1edbc b\u1ea1n c\u00f3 th\u1ec3 d\u00f9ng t\u1eeb kh\u00f3a \u0111\u1ec3 ch\u1ec9 \u0111\u1ecbnh nh\u01b0&nbsp;<em><code>thin<\/code><\/em>,<em>&nbsp;<code>medium<\/code><\/em>,<em>&nbsp;<code>thick<\/code><\/em>&nbsp;ho\u1eb7c d\u00f9ng&nbsp;<em><code>%<\/code><\/em>,<em>&nbsp;<code>em<\/code><\/em>, c\u00e1 nh\u00e2n t\u00f4i th\u00ec th\u00edch d\u00f9ng \u0111\u01a1n v\u1ecb&nbsp;<strong>px<\/strong>&nbsp;h\u01a1n \u0111\u1ec3 \u0111\u1ea1t \u0111\u01b0\u1ee3c ch\u00ednh x\u00e1c nh\u1eefng g\u00ec m\u00ecnh mu\u1ed1n. <\/p>\n\n\n\n<p>Ch\u00fang ta vi\u1ebft c\u00e2u l\u1ec7nh&nbsp;<code>border-width<\/code>&nbsp;\u0111\u1ec3 \u00e1p d\u1ee5ng k\u00edch th\u01b0\u1edbc \u0111\u01b0\u1eddng vi\u1ec1n. V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n   border-width: 3px;\n}<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<div style=\"border-style: solid; border-width: 3px; height: 150px; padding: 5px; width: 90%;\">\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<p>L\u01b0u \u00fd l\u00e0: N\u1ebfu b\u1ea1n ch\u01b0a quy \u0111\u1ecbnh ki\u1ec3u \u0111\u01b0\u1eddng vi\u1ec1n (<code>border-style<\/code>) th\u00ec n\u00f3 v\u1eabn kh\u00f4ng hi\u1ec7n \u0111\u01b0\u1eddng vi\u1ec1n l\u00ean cho b\u1ea1n. \u0110\u1ec3 hi\u1ec7n \u0111\u01b0\u1ee3c h\u1ed9p nh\u01b0 tr\u00ean, code \u0111\u1ea7y \u0111\u1ee7 ph\u1ea3i l\u00e0:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>div {\n   border-width: 3px;\n   border-style: solid;\n   width: 400px;\n   height: 300px; \n}<\/code><\/pre>\n\n\n\n<p>Tr\u01b0\u1edbc khi t\u00ecm hi\u1ec3u c\u00e1c ki\u1ec3u \u0111\u01b0\u1eddng vi\u1ec1n, h\u00e3y xem c\u00e1ch thay \u0111\u1ed5i m\u00e0u cho vi\u1ec1n.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Mau_sac_cua_duong_vien\"><\/span>2. M\u00e0u s\u1eafc c\u1ee7a \u0111\u01b0\u1eddng vi\u1ec1n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>V\u1ec1 m\u00e0u s\u1eafc th\u00ec b\u1ea1n c\u00f3 th\u1ec3 d\u00f9ng b\u1ea5t c\u1ee9 m\u00e0u n\u00e0o, ti\u1ec7n \u0111\u00e2y, r\u1ea5t c\u00f3 th\u1ec3 b\u1ea1n s\u1ebd th\u00edch b\u00e0i&nbsp;<a href=\"https:\/\/kiencang.net\/cac-cach-khai-bao-mau-sac-trong-css\/\" target=\"_blank\" rel=\"noreferrer noopener\">c\u00e1c c\u00e1ch khai b\u00e1o m\u00e0u s\u1eafc trong CSS<\/a>. Ch\u00fang ta d\u00f9ng c\u00e2u l\u1ec7nh&nbsp;<code>border-color<\/code>&nbsp;\u0111\u1ec3 \u00e1p d\u1ee5ng m\u00e0u s\u1eafc cho \u0111\u01b0\u1eddng vi\u1ec1n. V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>div {\n   border-color: aqua;\n}<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<div style=\"border-color: aqua; border-style: solid; border-with: 3px; height: 150px; padding: 5px; width: 80%; height: 90%;\">\nCode m\u1eabu cho h\u1ed9p n\u00e0y gi\u1ed1ng v\u1edbi \u0111o\u1ea1n tr\u00ean ch\u1ec9 kh\u00e1c l\u00e0 th\u00eam m\u00e0u s\u1eafc v\u00e0o.\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<p>Code m\u1eabu:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>div {\n   border-width: 3px;\n   border-style: solid;\n   border-color: aqua;\n   width: 400px;\n   height: 300px; \n}<\/code><\/pre>\n\n\n\n<p>N\u1ebfu b\u1ea1n kh\u00f4ng quy \u0111\u1ecbnh m\u00e0u c\u1ee5 th\u1ec3 cho vi\u1ec1n, n\u00f3 s\u1ebd l\u1ea5y&nbsp;<strong>m\u00e0u \u0111en l\u00e0m m\u00e0u m\u1eb7c \u0111\u1ecbnh<\/strong>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_Kieu_duong_vien\"><\/span>3. Ki\u1ec3u \u0111\u01b0\u1eddng vi\u1ec1n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>V\u1ec1 ki\u1ec3u \u0111\u01b0\u1eddng vi\u1ec1n, ta c\u00f3 kh\u00e1 nhi\u1ec1u ki\u1ec3u bao g\u1ed3m:&nbsp;<code>none<\/code>, <code>hidden<\/code>, <code>dotted<\/code>, <code>dashed<\/code>, <code>solid<\/code>, <code>double<\/code>, <code>groove<\/code>, <code>ridge<\/code>, <code>inset<\/code>&nbsp;v\u00e0<em>&nbsp;<\/em><code>outset<\/code>. \u0110\u1ec3 s\u1eed d\u1ee5ng ki\u1ec3u \u0111\u01b0\u1eddng vi\u1ec1n b\u1ea1n d\u00f9ng c\u00e2u l\u1ec7nh&nbsp;<code>border-style<\/code>.<\/p>\n\n\n\n<p>Ch\u00fang ta s\u1ebd th\u1eed t\u1ea5t c\u1ea3 c\u00e1c ki\u1ec3u \u0111\u01b0\u1eddng vi\u1ec1n \u1edf tr\u00ean \u2013 d\u0129 nhi\u00ean trong \u1ee9ng d\u1ee5ng ngo\u00e0i \u0111\u1eddi c\u00f3 m\u1ed9t v\u00e0i ki\u1ec3u \u0111\u01b0\u1eddng vi\u1ec1n ph\u1ed5 bi\u1ebfn h\u01a1n c\u00e1c ki\u1ec3u kh\u00e1c. Ki\u1ec3u hay d\u00f9ng nh\u1ea5t l\u00e0&nbsp;<code>solid<\/code>, \u0111\u00f3 ch\u00ednh l\u00e0 ki\u1ec3u n\u00e9t li\u1ec1n m\u00e0 2 h\u1ed9p \u1edf tr\u00ean l\u1ea5y.<\/p>\n\n\n\n<p>Th\u01b0\u1eddng th\u00ec ch\u00fang ta hay \u0111\u1eb7t \u0111\u01b0\u1eddng vi\u1ec1n cho th\u1ebb div, tuy nhi\u00ean trong th\u1ef1c t\u1ebf b\u1ea5t c\u1ee9 th\u1ebb n\u00e0o c\u1ee7a html c\u0169ng \u0111\u1ec1u \u00e1p d\u1ee5ng \u0111\u01b0\u1eddng vi\u1ec1n \u0111\u01b0\u1ee3c b\u1eb1ng t\u1eeb kh\u00f3a&nbsp;<code>border<\/code><strong>&nbsp;<\/strong>(xem th\u00eam:&nbsp;<a href=\"https:\/\/kiencang.net\/mo-hinh-hop-trong-css\/\" target=\"_blank\" rel=\"noreferrer noopener\">m\u00f4 h\u00ecnh h\u1ed9p trong CSS<\/a>). <\/p>\n\n\n\n<p>S\u1edf d\u0129 ch\u00fang ta kh\u00f4ng \u0111\u1ec3 \u00fd c\u00e1c th\u1ebb html c\u00f3 \u0111\u01b0\u1eddng vi\u1ec1n l\u00e0 v\u00ec theo m\u1eb7c \u0111\u1ecbnh ch\u00fang kh\u00f4ng \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb.<\/p>\n\n\n\n<p>\u0110\u1ec3 t\u1ea1o \u0111\u01b0\u1eddng vi\u1ec1n n\u00e9t li\u1ec1n c\u1ee1 1px v\u1edbi m\u00e0u \u0111\u1ecf cho th\u1ebb p ta vi\u1ebft nh\u01b0 sau:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>p {border-style:solid; border-width:1px; border-color:red;}<\/code><\/pre>\n\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 vi\u1ebft r\u00fat g\u1ecdn b\u1eb1ng c\u00e1ch sau:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>p {border: 1px solid red;}<\/code><\/pre>\n\n\n\n<p>B\u1ea1n \u0111\u1ec3 \u00fd th\u1ee9 t\u1ef1: k\u00edch c\u1ee1, ki\u1ec3u v\u00e0 m\u00e0u s\u1eafc \u2013 ngo\u00e0i ra l\u00e0 kh\u00f4ng c\u00f3 d\u1ea5u ch\u1ea5m ph\u1ea9y gi\u1eefa ch\u00fang m\u00e0 ch\u1ec9 c\u00f3 d\u1ea5u c\u00e1ch.<\/p>\n\n\n\n<p>B\u00e2y gi\u1edd l\u00e0 l\u00fac t\u00f4i th\u1eed c\u00e1c ki\u1ec3u kh\u00e1c nhau cho \u0111\u01b0\u1eddng vi\u1ec1n\u2026<\/p>\n\n\n\n<div style=\"border: 3px dotted red;\">T\u1ea1o \u0111\u01b0\u1eddng vi\u1ec1n cho th\u1ebb theo ki\u1ec3u dotted<\/div>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<div style=\"border: 3px dashed red;\">T\u1ea1o \u0111\u01b0\u1eddng vi\u1ec1n cho th\u1ebb theo ki\u1ec3u dashed<\/div>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<div style=\"border: 5px solid red;\">T\u1ea1o \u0111\u01b0\u1eddng vi\u1ec1n cho th\u1ebb theo ki\u1ec3u solid<\/div>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<div style=\"border: 5px double red;\">T\u1ea1o \u0111\u01b0\u1eddng vi\u1ec1n cho th\u1ebb theo ki\u1ec3u double<\/div>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<div style=\"border: 5px groove red;\">T\u1ea1o \u0111\u01b0\u1eddng vi\u1ec1n cho th\u1ebb theo ki\u1ec3u groove<\/div>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<div style=\"border: 5px ridge red;\">T\u1ea1o \u0111\u01b0\u1eddng vi\u1ec1n cho th\u1ebb theo ki\u1ec3u ridge<\/div>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<div style=\"border: 5px inset red;\">T\u1ea1o \u0111\u01b0\u1eddng vi\u1ec1n cho th\u1ebb theo ki\u1ec3u inset<\/div>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<div style=\"border: 5px outset red;\">T\u1ea1o \u0111\u01b0\u1eddng vi\u1ec1n cho th\u1ebb theo ki\u1ec3u outset<\/div>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<p>2 c\u00e1i none v\u00e0 hidden \u0111\u1ec1u kh\u00f4ng l\u00e0m xu\u1ea5t hi\u1ec7n \u0111\u01b0\u1eddng vi\u1ec1n.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"4_Bon_phia_cua_duong_vien\"><\/span>4. B\u1ed1n ph\u00eda c\u1ee7a \u0111\u01b0\u1eddng vi\u1ec1n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u0110\u01b0\u1eddng vi\u1ec1n c\u00f3 4 c\u1ea1nh gi\u1ed1ng nh\u01b0 h\u00ecnh ch\u1eef nh\u1eadt v\u1eady, b\u1ea1n ho\u00e0n to\u00e0n t\u00e1c \u0111\u1ed9ng \u0111\u01b0\u1ee3c v\u00e0o m\u1ed9t c\u1ea1nh c\u1ee5 th\u1ec3 trong 4 c\u1ea1nh \u0111\u00f3. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 m\u00e3 l\u1ec7nh:<\/p>\n\n\n\n<ul><li><code>border-bottom<\/code>: t\u00e1c \u0111\u1ed9ng \u0111\u1ebfn \u0111\u01b0\u1eddng vi\u1ec1n \u1edf \u0111\u00e1y;<\/li><li><code>border-top<\/code>: t\u00e1c \u0111\u1ed9ng \u0111\u1ebfn \u0111\u01b0\u1eddng vi\u1ec1n \u1edf \u0111\u1ec9nh;<\/li><li><code>border-left<\/code>: t\u00e1c \u0111\u1ed9ng \u0111\u1ebfn \u0111\u01b0\u1eddng vi\u1ec1n b\u00ean tr\u00e1i;<\/li><li><code>border-right<\/code>: t\u00e1c \u0111\u1ed9ng \u0111\u1ebfn \u0111\u01b0\u1eddng vi\u1ec1n b\u00ean ph\u1ea3i;<\/li><\/ul>\n\n\n\n<p>N\u1ebfu mu\u1ed1n ch\u1ecdn y\u1ebfu t\u1ed1 t\u00e1c \u0111\u1ed9ng l\u00e0 m\u00e0u, k\u00edch th\u01b0\u1edbc, hay ki\u1ec3u th\u00ec b\u1ea1n ch\u1ec9 c\u1ea7n th\u00eam thu\u1ed9c t\u00ednh \u0111\u00f3 v\u00e0o \u0111\u1eb1ng sau, v\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\nborder-bottom-color: red;\nborder-top-width: 5px;\nborder-right-style: dotted;\n}<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<div style=\"border-style: solid; border-width: 1px; height: 150px; padding: 5px; border-bottom-color: red; border-top-width: 5px; border-right-style: dotted; width: 90%;\">\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"5_Van_de_gia_tang_kich_thuoc_cua_div_va_cac_the_noi_chung_khi_su_dung_duong_vien\"><\/span>5. V\u1ea5n \u0111\u1ec1 gia t\u0103ng k\u00edch th\u01b0\u1edbc c\u1ee7a div v\u00e0 c\u00e1c th\u1ebb n\u00f3i chung khi s\u1eed d\u1ee5ng \u0111\u01b0\u1eddng vi\u1ec1n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u0110\u01b0\u1eddng vi\u1ec1n l\u00e0m k\u00edch th\u01b0\u1edbc c\u1ee7a th\u1ebb div, img, v\u00e0 t\u1ea5t c\u1ea3 c\u00e1c th\u1ebb kh\u00e1c, gia t\u0103ng n\u00e0y g\u1ed3m c\u1ea3 chi\u1ec1u cao v\u00e0 chi\u1ec1u r\u1ed9ng. \u0110i\u1ec1u n\u00e0y c\u0169ng gi\u1ed1ng th\u1ef1c t\u1ebf ngo\u00e0i \u0111\u1eddi, khi b\u1ea1n bao c\u00e1i g\u00ec \u0111\u00f3 b\u00ean ngo\u00e0i c\u00e1i h\u1ed9p, c\u00e1i h\u1ed9p \u0111\u00f3 s\u1ebd t\u0103ng k\u00edch th\u01b0\u1edbc.<\/p>\n\n\n\n<p>Gi\u00e1 tr\u1ecb k\u00edch th\u01b0\u1edbc gia t\u0103ng b\u1ea1n t\u00ednh \u0111\u01b0\u1ee3c r\u1ea5t d\u1ec5 d\u00e0ng, ch\u1eb3ng h\u1ea1n th\u1ebb div b\u1ea1n \u0111\u1ec3 vi\u1ec1n l\u00e0 3px th\u00ec chi\u1ec1u r\u1ed9ng c\u1ee7a th\u1ebb \u0111\u00f3 s\u1ebd t\u0103ng 6px = 3px * 2, chi\u1ec1u cao c\u0169ng v\u1eady. <\/p>\n\n\n\n<p>S\u1ee1 d\u0129 chi\u1ec1u r\u1ed9ng t\u0103ng 6px v\u00ec m\u1ed7i b\u00ean tr\u00e1i v\u00e0 ph\u1ea3i b\u1ea1n \u0111\u00e3 th\u00eam 3px cho vi\u1ec1n \u2013 gi\u1ea3i th\u00edch v\u1eeba n\u00f3i c\u0169ng \u00e1p d\u1ee5ng cho chi\u1ec1u cao.<\/p>\n\n\n\n<p>\u0110i\u1ec1u n\u00e0y s\u1ebd \u1ea3nh h\u01b0\u1edfng m\u1ed9t ch\u00fat \u0111\u1ebfn thi\u1ebft k\u1ebf, ch\u1eb3ng h\u1ea1n n\u1ebfu b\u1ea1n \u0111\u1ec3 c\u00e1i h\u1ed9p c\u00f3 chi\u1ec1u ngang 140px v\u00e0 \u0111\u1ec3 vi\u1ec1n 2px, chi\u1ec1u r\u1ed9ng s\u1ebd t\u0103ng 4px v\u00e0 l\u00e0m c\u00e1i h\u1ed9p d\u01b0 ra b\u00ean ngo\u00e0i. \u0110\u1ec3 ch\u1ec9nh l\u1ea1i b\u1ea1n ph\u1ea3i \u0111\u1ec3 h\u1ed9p c\u00f3 chi\u1ec1u r\u1ed9ng l\u00e0 140px \u2013 4px = 136px \u0111\u1ec3 n\u00f3 kh\u1edbp \u0111\u00fang v\u1edbi thi\u1ebft k\u1ebf ban \u0111\u1ea7u.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"6_Bo_tron_goc_cho_duong_vien\"><\/span>6. Bo tr\u00f2n g\u00f3c cho \u0111\u01b0\u1eddng vi\u1ec1n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Bo tr\u00f2n g\u00f3c l\u00e0 thu\u1ed9c t\u00ednh c\u1ee7a CSS3 l\u00e0m \u0111\u01b0\u1eddng vi\u1ec1n tr\u00f4ng m\u1ec1m m\u1ea1i h\u01a1n, mu\u1ed1n th\u1ebf b\u1ea1n ch\u1ec9 c\u1ea7n th\u00eam v\u00e0i d\u00f2ng sau:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>-webkit-border-radius: 15px;\n-moz-border-radius: 15px;\nborder-radius: 15px;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<div style=\"-moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; border: 2px solid red; width: 90%; height: 150px;\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<p>\u0110o\u1ea1n <code>-webkit-border-radius: 15px;<\/code> l\u00e0 \u0111\u1ec3 d\u00e0nh cho c\u00e1c tr\u00ecnh duy\u1ec7t t\u01b0\u01a1ng t\u1ef1 nh\u01b0 Google Chrome, <code>-moz-border-radius: 15px;<\/code> l\u00e0 \u0111\u1ec3 d\u00e0nh cho c\u00e1c tr\u00ecnh duy\u1ec7t t\u01b0\u01a1ng t\u1ef1 nh\u01b0 FireFox, <code>border-radius: 15px;<\/code> l\u00e0 m\u00e3 chu\u1ea9n \u2013 D\u0129 nhi\u00ean b\u1ea1n ph\u1ea3i cho c\u1ea3 3 d\u00f2ng tr\u00ean v\u00e0o CSS \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o n\u00f3 ho\u1ea1t \u0111\u1ed9ng t\u1ed1t tr\u00ean h\u1ea7u h\u1ebft c\u00e1c tr\u00ecnh duy\u1ec7t web. <\/p>\n\n\n\n<p>\u0110\u1ec3 thay \u0111\u1ed5i \u0111\u1ed9 l\u1edbn c\u1ee7a g\u00f3c bo, b\u1ea1n thay \u0111\u1ed5i gi\u00e1 tr\u1ecb 15px \u2013 t\u0103ng gi\u1ea3m t\u00f9y \u00fd. N\u1ebfu b\u1ea1n t\u00f2 m\u00f2 mu\u1ed1n&nbsp;<a href=\"https:\/\/kiencang.net\/code-bo-tron-anh-voi-css3\/\" target=\"_blank\" rel=\"noreferrer noopener\">bo tr\u00f2n \u1ea3nh th\u00ec h\u00e3y xem ti\u1ebfp b\u00e0i n\u00e0y<\/a>.<\/p>\n\n\n\n<p>C\u00f3 4 g\u00f3c \u0111\u1ec3 bo, b\u1ea1n c\u00f3 th\u1ec3 quy \u0111\u1ecbnh c\u1ee5 th\u1ec3 l\u00e0 s\u1ebd bo g\u00f3c n\u00e0o v\u00e0 kh\u00f4ng bo g\u00f3c n\u00e0o, c\u00e1c thu\u1ed9c t\u00ednh gi\u00fap cho quy \u0111\u1ecbnh n\u00e0y \u0111\u00f3 l\u00e0:<\/p>\n\n\n\n<ul><li><code>border-top-left-radius<\/code><em>: 4px<\/em>&nbsp;\u2013 g\u00f3c ph\u00eda tr\u00ean b\u00ean tr\u00e1i s\u1ebd \u0111\u01b0\u1ee3c bo 4px;<\/li><li><code>border-top-right-radius<\/code><em>: 8px<\/em>&nbsp;\u2013 g\u00f3c ph\u00eda tr\u00ean b\u00ean ph\u1ea3i \u0111\u01b0\u1ee3c bo 8px;<\/li><li><code>border-bottom-right-radius<\/code><em>: 16px<\/em>&nbsp;\u2013 g\u00f3c ph\u00eda d\u01b0\u1edbi b\u00ean ph\u1ea3i \u0111\u01b0\u1ee3c bo 16px;<\/li><li><code>border-bottom-left-radius<\/code><em>: 32px<\/em>&nbsp;\u2013 g\u00f3c ph\u00eda d\u01b0\u1edbi b\u00ean tr\u00e1i \u0111\u01b0\u1ee3c bo 32px;<\/li><\/ul>\n\n\n\n<p>C\u00fa ph\u00e1p l\u00e0&nbsp;<em>\u0111\u01b0\u1eddng vi\u1ec1n (border)-v\u1ecb tr\u00ed tr\u00ean (top) ho\u1eb7c d\u01b0\u1edbi (bottom)-v\u1ecb tr\u00ed tr\u00e1i (left) ho\u1eb7c ph\u1ea3i (right): gi\u00e1 tr\u1ecb<\/em> (px). <\/p>\n\n\n\n<p>Cu\u1ed1i c\u00f9ng l\u00e0 k\u1ebft qu\u1ea3 c\u1ee7a \u0111o\u1ea1n code tr\u00ean:<\/p>\n\n\n\n<div style=\"border-bottom-left-radius: 32px; border-bottom-right-radius: 16px; border-top-left-radius: 4px; border-top-right-radius: 8px; border: 2px solid red; padding: 20px; width: 90%;\">Bo c\u00e1c g\u00f3c kh\u00e1c nhau 4px, 8px, 16px v\u00e0 32px<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0110\u01b0\u1eddng vi\u1ec1n l\u00e0 y\u1ebfu t\u1ed1 g\u00e2y n\u1ed5i b\u1eadt kh\u00e1 quan tr\u1ecdng \u2013 n\u00f3 t\u1ea1o ranh gi\u1edbi v\u1edbi nh\u1eefng ph\u1ea7n c\u00f2n l\u1ea1i c\u1ee7a trang web. H\u00f4m nay ch\u00fang ta c\u00f9ng xem th\u1eed CSS l\u00e0m \u0111\u01b0\u1ee3c nh\u1eefng g\u00ec v\u1edbi \u0111\u01b0\u1eddng vi\u1ec1n. Ba thu\u1ed9c t\u00ednh quan tr\u1ecdng c\u1ee7a \u0111\u01b0\u1eddng vi\u1ec1n \u0111\u00f3 l\u00e0: K\u00edch th\u01b0\u1edbc \u0111\u01b0\u1eddng vi\u1ec1n; M\u00e0u s\u1eafc &hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[229],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>C\u00e1ch s\u1eed d\u1ee5ng \u0111\u01b0\u1eddng vi\u1ec1n (border) trong CSS &#8226; Ki\u1ebfn c\u00e0ng<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kiencang.net\/cach-su-dung-duong-vien-border-trong-css\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00e1ch s\u1eed d\u1ee5ng \u0111\u01b0\u1eddng vi\u1ec1n (border) trong CSS &#8226; Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"og:description\" content=\"\u0110\u01b0\u1eddng vi\u1ec1n l\u00e0 y\u1ebfu t\u1ed1 g\u00e2y n\u1ed5i b\u1eadt kh\u00e1 quan tr\u1ecdng \u2013 n\u00f3 t\u1ea1o ranh gi\u1edbi v\u1edbi nh\u1eefng ph\u1ea7n c\u00f2n l\u1ea1i c\u1ee7a trang web. H\u00f4m nay ch\u00fang ta c\u00f9ng xem th\u1eed CSS l\u00e0m \u0111\u01b0\u1ee3c nh\u1eefng g\u00ec v\u1edbi \u0111\u01b0\u1eddng vi\u1ec1n. Ba thu\u1ed9c t\u00ednh quan tr\u1ecdng c\u1ee7a \u0111\u01b0\u1eddng vi\u1ec1n \u0111\u00f3 l\u00e0: K\u00edch th\u01b0\u1edbc \u0111\u01b0\u1eddng vi\u1ec1n; M\u00e0u s\u1eafc &hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kiencang.net\/cach-su-dung-duong-vien-border-trong-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/anhducnguyen87\/\" \/>\n<meta property=\"article:published_time\" content=\"2013-09-04T07:51:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-08-01T16:39:12+00:00\" \/>\n<meta name=\"author\" content=\"Nguy\u1ec5n \u0110\u1ee9c Anh\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nguy\u1ec5n \u0110\u1ee9c Anh\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 ph\u00fat\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"C\u00e1ch s\u1eed d\u1ee5ng \u0111\u01b0\u1eddng vi\u1ec1n (border) trong CSS &#8226; Ki\u1ebfn c\u00e0ng","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kiencang.net\/cach-su-dung-duong-vien-border-trong-css\/","og_locale":"vi_VN","og_type":"article","og_title":"C\u00e1ch s\u1eed d\u1ee5ng \u0111\u01b0\u1eddng vi\u1ec1n (border) trong CSS &#8226; Ki\u1ebfn c\u00e0ng","og_description":"\u0110\u01b0\u1eddng vi\u1ec1n l\u00e0 y\u1ebfu t\u1ed1 g\u00e2y n\u1ed5i b\u1eadt kh\u00e1 quan tr\u1ecdng \u2013 n\u00f3 t\u1ea1o ranh gi\u1edbi v\u1edbi nh\u1eefng ph\u1ea7n c\u00f2n l\u1ea1i c\u1ee7a trang web. H\u00f4m nay ch\u00fang ta c\u00f9ng xem th\u1eed CSS l\u00e0m \u0111\u01b0\u1ee3c nh\u1eefng g\u00ec v\u1edbi \u0111\u01b0\u1eddng vi\u1ec1n. Ba thu\u1ed9c t\u00ednh quan tr\u1ecdng c\u1ee7a \u0111\u01b0\u1eddng vi\u1ec1n \u0111\u00f3 l\u00e0: K\u00edch th\u01b0\u1edbc \u0111\u01b0\u1eddng vi\u1ec1n; M\u00e0u s\u1eafc &hellip;","og_url":"https:\/\/kiencang.net\/cach-su-dung-duong-vien-border-trong-css\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2013-09-04T07:51:00+00:00","article_modified_time":"2022-08-01T16:39:12+00:00","author":"Nguy\u1ec5n \u0110\u1ee9c Anh","twitter_card":"summary_large_image","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"Nguy\u1ec5n \u0110\u1ee9c Anh","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"6 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/cach-su-dung-duong-vien-border-trong-css\/","url":"https:\/\/kiencang.net\/cach-su-dung-duong-vien-border-trong-css\/","name":"C\u00e1ch s\u1eed d\u1ee5ng \u0111\u01b0\u1eddng vi\u1ec1n (border) trong CSS &#8226; Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2013-09-04T07:51:00+00:00","dateModified":"2022-08-01T16:39:12+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/cach-su-dung-duong-vien-border-trong-css\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/cach-su-dung-duong-vien-border-trong-css\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/cach-su-dung-duong-vien-border-trong-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"C\u00e1ch s\u1eed d\u1ee5ng \u0111\u01b0\u1eddng vi\u1ec1n (border) trong CSS"}]},{"@type":"WebSite","@id":"https:\/\/kiencang.net\/#website","url":"https:\/\/kiencang.net\/","name":"Ki\u1ebfn c\u00e0ng","description":"\u00d4m l\u00fd thuy\u1ebft, h\u00f4n th\u1ef1c h\u00e0nh","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kiencang.net\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"vi"},{"@type":"Person","@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16","name":"Nguy\u1ec5n \u0110\u1ee9c Anh","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/kiencang.net\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6d71f9b89393952a8382e30dad26c1ec?s=96&d=monsterid&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6d71f9b89393952a8382e30dad26c1ec?s=96&d=monsterid&r=g","caption":"Nguy\u1ec5n \u0110\u1ee9c Anh"},"description":"Sinh n\u0103m 1987, t\u1ed1t nghi\u1ec7p Cao \u0111\u1eb3ng th\u1ef1c h\u00e0nh FPT qu\u00e3ng 2014, chuy\u00ean ng\u00e0nh Thi\u1ebft k\u1ebf website. T\u00f4i th\u00edch Content, SEO, Ads, T\u0103ng t\u1ed1c website v\u00e0 Th\u01b0\u01a1ng m\u1ea1i \u0111i\u1ec7n t\u1eed. B\u00ean c\u1ea1nh b\u00e0i t\u1ef1 vi\u1ebft, t\u00f4i c\u0169ng d\u1ecbch nhi\u1ec1u n\u1ed9i dung th\u00fa v\u1ecb c\u1ee7a c\u00e1c t\u00e1c gi\u1ea3 kh\u00e1c nhau. FB c\u00e1 nh\u00e2n: facebook.com\/anhducnguyen87. Email li\u00ean h\u1ec7: guiemailchotoi@gmail.com","sameAs":["https:\/\/www.facebook.com\/anhducnguyen87\/"],"url":"https:\/\/kiencang.net\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/318"}],"collection":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/comments?post=318"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/318\/revisions"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=318"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=318"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=318"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}