{"id":73258,"date":"2024-06-14T17:23:38","date_gmt":"2024-06-14T10:23:38","guid":{"rendered":"https:\/\/itviec.com\/blog\/?p=73258"},"modified":"2025-07-20T12:44:09","modified_gmt":"2025-07-20T05:44:09","slug":"border-css","status":"publish","type":"post","link":"https:\/\/itviec.com\/blog\/border-css\/","title":{"rendered":"Border CSS: H\u01b0\u1edbng d\u1eabn chi ti\u1ebft 9 c\u00e1ch s\u1eed d\u1ee5ng border CSS"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">N\u1ed9i dung b\u00e0i vi\u1ebft<\/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\"><span class=\"ez-toc-js-icon-con\"><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><\/span><\/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:\/\/itviec.com\/blog\/border-css\/#Border_CSS_la_gi\" >Border CSS l\u00e0 g\u00ec?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/itviec.com\/blog\/border-css\/#Cac_thuoc_tinh_cua_border_CSS\" >C\u00e1c thu\u1ed9c t\u00ednh c\u1ee7a border CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/itviec.com\/blog\/border-css\/#Cach_xac_dinh_thuoc_tinh_kieu_border_CSS_voi_border-style\" >C\u00e1ch x\u00e1c \u0111\u1ecbnh thu\u1ed9c t\u00ednh ki\u1ec3u border CSS v\u1edbi border-style<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/itviec.com\/blog\/border-css\/#Cach_xac_dinh_thuoc_tinh_chieu_rong_border_CSS_voi_border-width\" >C\u00e1ch x\u00e1c \u0111\u1ecbnh thu\u1ed9c t\u00ednh chi\u1ec1u r\u1ed9ng border CSS v\u1edbi border-width<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/itviec.com\/blog\/border-css\/#Cach_xac_dinh_thuoc_tinh_mau_border_CSS_voi_border-color\" >C\u00e1ch x\u00e1c \u0111\u1ecbnh thu\u1ed9c t\u00ednh m\u00e0u border CSS v\u1edbi border-color<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/itviec.com\/blog\/border-css\/#Cach_them_phan_dem_cho_border_CSS_border_padding\" >C\u00e1ch th\u00eam ph\u1ea7n \u0111\u1ec7m cho border CSS (border padding)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/itviec.com\/blog\/border-css\/#Cach_them_box-shadow_cho_border_CSS_border_shadow\" >C\u00e1ch th\u00eam box-shadow cho border CSS (border shadow)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/itviec.com\/blog\/border-css\/#Cach_dat_hinh_anh_lam_border_image_border\" >C\u00e1ch \u0111\u1eb7t h\u00ecnh \u1ea3nh l\u00e0m border (image border)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/itviec.com\/blog\/border-css\/#Cach_dieu_chinh_gradient_cho_border_CSS_border_gradient\" >C\u00e1ch \u0111i\u1ec1u ch\u1ec9nh gradient cho border CSS (border gradient)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/itviec.com\/blog\/border-css\/#Cach_tao_border_CSS_canh_tron_voi_border_radius\" >C\u00e1ch t\u1ea1o border CSS c\u1ea1nh tr\u00f2n v\u1edbi border radius<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/itviec.com\/blog\/border-css\/#Cach_thu_gon_border_trong_bang\" >C\u00e1ch thu g\u1ecdn border trong b\u1ea3ng&nbsp;<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/itviec.com\/blog\/border-css\/#Cac_cau_hoi_thuong_gap_ve_border_CSS\" >C\u00e1c c\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 border CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/itviec.com\/blog\/border-css\/#Tong_ket_border_CSS\" >T\u1ed5ng k\u1ebft border CSS<\/a><\/li><\/ul><\/nav><\/div>\n\n<p><em><strong>Border CSS l\u00e0 m\u1ed9t y\u1ebfu t\u1ed1 quan tr\u1ecdng trong thi\u1ebft k\u1ebf web, \u0111\u00f3ng vai tr\u00f2 trong vi\u1ec7c ph\u00e2n t\u00e1ch v\u00e0 thu h\u00fat s\u1ef1 ch\u00fa \u00fd \u0111\u1ebfn n\u1ed9i dung tr\u00ean trang. Hi\u1ec3u v\u00e0 s\u1eed d\u1ee5ng \u0111\u00fang c\u00e1ch thu\u1ed9c t\u00ednh n\u00e0y kh\u00f4ng ch\u1ec9 gi\u00fap l\u00e0m n\u1ed5i b\u1eadt c\u00e1c th\u00e0nh ph\u1ea7n tr\u00ean trang web m\u00e0 c\u00f2n t\u0103ng c\u01b0\u1eddng tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng. Trong b\u00e0i vi\u1ebft n\u00e0y, ITviec s\u1ebd h\u01b0\u1edbng d\u1eabn chi ti\u1ebft 9 c\u00e1ch s\u1eed d\u1ee5ng border CSS \u0111\u1ec3 b\u1ea1n c\u00f3 th\u1ec3 \u00e1p d\u1ee5ng hi\u1ec7u qu\u1ea3 trong c\u00e1c d\u1ef1 \u00e1n c\u1ee7a b\u1ea3n th\u00e2n.<\/strong><\/em><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">\u0110\u1ecdc b\u00e0i vi\u1ebft \u0111\u1ec3 hi\u1ec3u r\u00f5 h\u01a1n:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">Border CSS l\u00e0 g\u00ec?\u00a0<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">C\u00e1c thu\u1ed9c t\u00ednh c\u1ee7a border CSS g\u1ed3m nh\u1eefng g\u00ec<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">9 thao t\u00e1c c\u01a1 b\u1ea3n \u0111\u1ec3 s\u1eed d\u1ee5ng c\u00e1c thu\u1ed9c t\u00ednh border CSS<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Gi\u1ea3i \u0111\u00e1p c\u00e1c c\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 border CSS<\/span><\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Tham kh\u1ea3o <a href=\"https:\/\/itviec.com\/viec-lam-it\/css?utm_medium=anchor_text_high&amp;utm_source=blog&amp;utm_campaign=viec_lam_css&amp;utm_content=border_css\" target=\"_blank\" rel=\"noreferrer noopener\">vi\u1ec7c l\u00e0m CSS<\/a> to\u00e0n qu\u1ed1c<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-border-css-la-gi\"><span class=\"ez-toc-section\" id=\"Border_CSS_la_gi\"><\/span><b>Border CSS l\u00e0 g\u00ec? <\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><b>Border <\/b><span style=\"font-weight: 400;\">l\u00e0 m\u1ed9t thu\u1ed9c t\u00ednh trong CSS \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 t\u1ea1o \u0111\u01b0\u1eddng vi\u1ec1n cho c\u00e1c ph\u1ea7n t\u1eed. Nh\u01b0 trong h\u00ecnh \u1ea3nh minh ho\u1ea1 b\u00ean d\u01b0\u1edbi, border ch\u00ednh l\u00e0 kho\u1ea3ng tr\u1ed1ng n\u1eb1m gi\u1eefa margin (r\u00eca ngo\u00e0i) v\u00e0 padding (\u0111\u1ec7m trong).<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Margin (r\u00eca ngo\u00e0i):<\/b><span style=\"font-weight: 400;\"> \u0110\u00e2y l\u00e0 kho\u1ea3ng tr\u1ed1ng b\u00ean ngo\u00e0i c\u1ee7a th\u00e0nh ph\u1ea7n. N\u00f3 l\u00e0m t\u0103ng\/gi\u1ea3m kho\u1ea3ng c\u00e1ch gi\u1eefa hai th\u00e0nh ph\u1ea7n c\u1ea1nh nhau.<\/span><\/li>\n\n\n\n<li><b>Padding (\u0111\u1ec7m trong):<\/b><span style=\"font-weight: 400;\"> \u0110\u00e2y l\u00e0 kho\u1ea3ng tr\u1ed1ng b\u00ean trong c\u1ee7a th\u00e0nh ph\u1ea7n. N\u00f3 l\u00e0m t\u0103ng\/gi\u1ea3m kho\u1ea3ng c\u00e1ch gi\u1eefa n\u1ed9i dung (content) v\u00e0 \u0111\u01b0\u1eddng vi\u1ec1n (border).<\/span><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"2219\" height=\"1190\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/Border-css-structure-vippro.png\" alt=\"\" class=\"wp-image-73279\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/Border-css-structure-vippro.png 2219w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/Border-css-structure-vippro-300x161.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/Border-css-structure-vippro-1600x858.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/Border-css-structure-vippro-200x107.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/Border-css-structure-vippro-100x54.png 100w\" sizes=\"auto, (max-width: 2219px) 100vw, 2219px\" \/><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\">Border CSS gi\u00fap ch\u00fang ta x\u00e1c \u0111\u1ecbnh ki\u1ec3u d\u00e1ng, \u0111\u1ed9 r\u1ed9ng v\u00e0 m\u00e0u s\u1eafc \u0111\u01b0\u1eddng vi\u1ec1n c\u1ee7a m\u1ed9t ph\u1ea7n t\u1eed, mang \u0111\u1ebfn s\u1ef1 linh ho\u1ea1t trong vi\u1ec7c thi\u1ebft k\u1ebf v\u00e0 trang tr\u00ed c\u00e1c th\u00e0nh ph\u1ea7n web, t\u1eeb \u0111\u00f3 gi\u00fap ch\u00fang n\u1ed5i b\u1eadt h\u01a1n ho\u1eb7c h\u00e0i h\u00f2a v\u1edbi t\u1ed5ng th\u1ec3 giao di\u1ec7n.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cac-thu\u1ed9c-tinh-c\u1ee7a-border-css\"><span class=\"ez-toc-section\" id=\"Cac_thuoc_tinh_cua_border_CSS\"><\/span><b>C\u00e1c thu\u1ed9c t\u00ednh c\u1ee7a border CSS<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Border CSS g\u1ed3m c\u00e1c thu\u1ed9c t\u00ednh sau:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td>\n<p style=\"text-align: left;\"><b>Thu\u1ed9c t\u00ednh<\/b><\/p>\n<\/td><td><b>M\u00f4 t\u1ea3<\/b><\/td><td><b>Gi\u00e1 tr\u1ecb<\/b><\/td><\/tr><tr><td><span style=\"font-weight: 400;\">border<\/span><\/td><td><span style=\"font-weight: 400;\">Thi\u1ebft l\u1eadp t\u1ea5t c\u1ea3 c\u00e1c thu\u1ed9c t\u00ednh border trong m\u1ed9t khai b\u00e1o<\/span><\/td><td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">border-width, border-style, border-color<\/span><\/p>\n<\/td><\/tr><tr><td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">border-bottom<\/span><\/p>\n<\/td><td><span style=\"font-weight: 400;\">Thi\u1ebft l\u1eadp t\u1ea5t c\u1ea3 c\u00e1c thu\u1ed9c t\u00ednh border d\u01b0\u1edbi c\u00f9ng trong m\u1ed9t khai b\u00e1o<\/span><\/td><td><span style=\"font-weight: 400;\">border-bottom-width, border-bottom-style, border-bottom-color<\/span><\/td><\/tr><tr><td><span style=\"font-weight: 400;\">border-bottom-color<\/span><\/td><td><span style=\"font-weight: 400;\">Thi\u1ebft l\u1eadp m\u00e0u c\u1ee7a border d\u01b0\u1edbi c\u00f9ng<\/span><\/td><td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">border-color<\/span><\/p>\n<\/td><\/tr><tr><td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">border-bottom-style<\/span><\/p>\n<\/td><td><span style=\"font-weight: 400;\">Thi\u1ebft l\u1eadp ki\u1ec3u c\u1ee7a border d\u01b0\u1edbi c\u00f9ng<\/span><\/td><td><span style=\"font-weight: 400;\">border-style<\/span><\/td><\/tr><tr><td><span style=\"font-weight: 400;\">border-bottom-width<\/span><\/td><td><span style=\"font-weight: 400;\">Thi\u1ebft l\u1eadp \u0111\u1ed9 r\u1ed9ng c\u1ee7a border d\u01b0\u1edbi c\u00f9ng<\/span><\/td><td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">border-width<\/span><\/p>\n<\/td><\/tr><tr><td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">border-color<\/span><\/p>\n<\/td><td><span style=\"font-weight: 400;\">Thi\u1ebft l\u1eadp m\u00e0u c\u1ee7a c\u1ea3 b\u1ed1n border<\/span><\/td><td><span style=\"font-weight: 400;\">color_name, hex_number, rgb_number, transparent, inherit<\/span><\/td><\/tr><tr><td><span style=\"font-weight: 400;\">border-left<\/span><\/td><td><span style=\"font-weight: 400;\">Thi\u1ebft l\u1eadp t\u1ea5t c\u1ea3 thu\u1ed9c t\u00ednh border tr\u00e1i trong m\u1ed9t khai b\u00e1o<\/span><\/td><td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">border-left-width, border-left-style, border-left-color<\/span><\/p>\n<\/td><\/tr><tr><td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">border-left-color<\/span><\/p>\n<\/td><td><span style=\"font-weight: 400;\">Thi\u1ebft l\u1eadp m\u00e0u c\u1ee7a border tr\u00e1i<\/span><\/td><td><span style=\"font-weight: 400;\">border-color<\/span><\/td><\/tr><tr><td><span style=\"font-weight: 400;\">border-left-style<\/span><\/td><td><span style=\"font-weight: 400;\">Thi\u1ebft l\u1eadp ki\u1ec3u c\u1ee7a border tr\u00e1i 1 0.<\/span><\/td><td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">border-style<\/span><\/p>\n<\/td><\/tr><tr><td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">border-left-width<\/span><\/p>\n<\/td><td><span style=\"font-weight: 400;\">Thi\u1ebft l\u1eadp \u0111\u1ed9 r\u1ed9ng c\u1ee7a border tr\u00e1i<\/span><\/td><td><span style=\"font-weight: 400;\">border-width<\/span><\/td><\/tr><tr><td><span style=\"font-weight: 400;\">border-right<\/span><\/td><td><span style=\"font-weight: 400;\">Thi\u1ebft l\u1eadp t\u1ea5t c\u1ea3 thu\u1ed9c t\u00ednh border ph\u1ea3i trong m\u1ed9t khai b\u00e1o<\/span><\/td><td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">border-right-width, border-right-style, border-right-color<\/span><\/p>\n<\/td><\/tr><tr><td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">border-right-color<\/span><\/p>\n<\/td><td><span style=\"font-weight: 400;\">Thi\u1ebft l\u1eadp m\u00e0u c\u1ee7a border ph\u1ea3i<\/span><\/td><td><span style=\"font-weight: 400;\">border-color<\/span><\/td><\/tr><tr><td><span style=\"font-weight: 400;\">border-right-style<\/span><\/td><td><span style=\"font-weight: 400;\">Thi\u1ebft l\u1eadp ki\u1ec3u c\u1ee7a border ph\u1ea3i<\/span><\/td><td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">border-style<\/span><\/p>\n<\/td><\/tr><tr><td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">border-right-width<\/span><\/p>\n<\/td><td><span style=\"font-weight: 400;\">Thi\u1ebft l\u1eadp \u0111\u1ed9 r\u1ed9ng c\u1ee7a border ph\u1ea3i<\/span><\/td><td><span style=\"font-weight: 400;\">border-width<\/span><\/td><\/tr><tr><td><span style=\"font-weight: 400;\">border-style<\/span><\/td><td><span style=\"font-weight: 400;\">Thi\u1ebft l\u1eadp ki\u1ec3u c\u1ee7a c\u1ea3 b\u1ed1n border<\/span><\/td><td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, inherit<\/span><\/p>\n<\/td><\/tr><tr><td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">border-top<\/span><\/p>\n<\/td><td><span style=\"font-weight: 400;\">Thi\u1ebft l\u1eadp t\u1ea5t c\u1ea3 thu\u1ed9c t\u00ednh border tr\u00ean c\u00f9ng trong m\u1ed9t khai b\u00e1o<\/span><\/td><td><span style=\"font-weight: 400;\">border-top-width, border-top-style, border-top-color<\/span><\/td><\/tr><tr><td><span style=\"font-weight: 400;\">border-top-color<\/span><\/td><td><span style=\"font-weight: 400;\">Thi\u1ebft l\u1eadp m\u00e0u c\u1ee7a border tr\u00ean c\u00f9ng<\/span><\/td><td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">border-color<\/span><\/p>\n<\/td><\/tr><tr><td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">border-top-style<\/span><\/p>\n<\/td><td><span style=\"font-weight: 400;\">Thi\u1ebft l\u1eadp ki\u1ec3u c\u1ee7a border tr\u00ean c\u00f9ng<\/span><\/td><td><span style=\"font-weight: 400;\">border-style<\/span><\/td><\/tr><tr><td><span style=\"font-weight: 400;\">border-top-width<\/span><\/td><td><span style=\"font-weight: 400;\">Thi\u1ebft l\u1eadp \u0111\u1ed9 r\u1ed9ng c\u1ee7a border tr\u00ean c\u00f9ng<\/span><\/td><td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">border-width<\/span><\/p>\n<\/td><\/tr><tr><td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">border-width<\/span><\/p>\n<\/td><td><span style=\"font-weight: 400;\">Thi\u1ebft l\u1eadp \u0111\u1ed9 r\u1ed9ng c\u1ee7a c\u1ea3 b\u1ed1n border<\/span><\/td><td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">thin, medium, thick, length, inherit<\/span><\/p>\n<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cach-xac-d\u1ecbnh-thu\u1ed9c-tinh-ki\u1ec3u-border-css-v\u1edbi-border-style\"><span class=\"ez-toc-section\" id=\"Cach_xac_dinh_thuoc_tinh_kieu_border_CSS_voi_border-style\"><\/span><b>C\u00e1ch x\u00e1c \u0111\u1ecbnh thu\u1ed9c t\u00ednh ki\u1ec3u border CSS v\u1edbi border-style<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>border-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset | hidden;<\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Thu\u1ed9c t\u00ednh border-style trong CSS gi\u00fap x\u00e1c \u0111\u1ecbnh ki\u1ec3u hi\u1ec3n th\u1ecb c\u1ee7a border. C\u00f3 10 gi\u00e1 tr\u1ecb kh\u1ea3 d\u1ee5ng \u0111\u1ec3 thi\u1ebft l\u1eadp cho thu\u1ed9c t\u00ednh n\u00e0y v\u1edbi c\u00e1c ki\u1ec3u hi\u1ec3n th\u1ecb nh\u01b0 sau:&nbsp;<\/span><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td>\n<p style=\"text-align: left;\"><b>Gi\u00e1 tr\u1ecb<\/b><\/p>\n<\/td><td><b>M\u00f4 t\u1ea3<\/b><\/td><td>\n<p style=\"text-align: left;\"><b>Hi\u1ec3n th\u1ecb<\/b><\/p>\n<\/td><\/tr><tr><td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">none<\/span><\/p>\n<\/td><td><span style=\"font-weight: 400;\">Kh\u00f4ng hi\u1ec3n th\u1ecb border.<\/span><\/td><td>&nbsp;<\/td><\/tr><tr><td><span style=\"font-weight: 400;\">solid<\/span><\/td><td><span style=\"font-weight: 400;\">Border li\u1ec1n m\u1ea1ch.<\/span><\/td><td>\n<figure><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-73287 size-thumbnail\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-solid-vippro-200x112.png\" alt=\"\" width=\"200\" height=\"112\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-solid-vippro-200x112.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-solid-vippro-300x168.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-solid-vippro-100x56.png 100w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-solid-vippro.png 508w\" sizes=\"auto, (max-width: 200px) 100vw, 200px\" \/><\/figure><p style=\"text-align: left;\"><\/p>\n<\/td><\/tr><tr><td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">dashed<\/span><\/p>\n<\/td><td><span style=\"font-weight: 400;\">Border n\u00e9t \u0111\u1ee9t.<\/span><\/td><td><figure><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-73289 size-thumbnail\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-dashed-vippro-200x114.png\" alt=\"\" width=\"200\" height=\"114\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-dashed-vippro-200x114.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-dashed-vippro-300x171.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-dashed-vippro-100x57.png 100w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-dashed-vippro.png 510w\" sizes=\"auto, (max-width: 200px) 100vw, 200px\" \/><\/figure><\/td><\/tr><tr><td><span style=\"font-weight: 400;\">dotted<\/span><\/td><td><span style=\"font-weight: 400;\">Border ch\u1ea5m bi.<\/span><\/td><td>\n<figure><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-thumbnail wp-image-73288\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-dotted-vippro-200x112.png\" alt=\"\" width=\"200\" height=\"112\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-dotted-vippro-200x112.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-dotted-vippro-300x168.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-dotted-vippro-100x56.png 100w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-dotted-vippro.png 510w\" sizes=\"auto, (max-width: 200px) 100vw, 200px\" \/><\/figure><p style=\"text-align: left;\"><\/p>\n<\/td><\/tr><tr><td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">double<\/span><\/p>\n<\/td><td><span style=\"font-weight: 400;\">Border \u0111\u00f4i.<\/span><\/td><td><figure><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-thumbnail wp-image-73286\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-double-vippro-200x111.png\" alt=\"\" width=\"200\" height=\"111\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-double-vippro-200x111.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-double-vippro-300x167.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-double-vippro-100x56.png 100w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-double-vippro.png 506w\" sizes=\"auto, (max-width: 200px) 100vw, 200px\" \/><\/figure><\/td><\/tr><tr><td><span style=\"font-weight: 400;\">groove<\/span><\/td><td><span style=\"font-weight: 400;\">T\u1ea1o hi\u1ec7u \u1ee9ng r\u00e3nh 3D cho border.<\/span><\/td><td>\n<figure><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-thumbnail wp-image-73285\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-groove-vippro-200x111.png\" alt=\"\" width=\"200\" height=\"111\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-groove-vippro-200x111.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-groove-vippro-300x166.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-groove-vippro-100x55.png 100w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-groove-vippro.png 494w\" sizes=\"auto, (max-width: 200px) 100vw, 200px\" \/><\/figure><p style=\"text-align: left;\"><\/p>\n<\/td><\/tr><tr><td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">ridge<\/span><\/p>\n<\/td><td><span style=\"font-weight: 400;\">T\u1ea1o hi\u1ec7u \u1ee9ng nh\u00f4 3D cho border.<\/span><\/td><td><figure><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-thumbnail wp-image-73284\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-ridge-vippro-200x111.png\" alt=\"\" width=\"200\" height=\"111\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-ridge-vippro-200x111.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-ridge-vippro-300x167.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-ridge-vippro-100x56.png 100w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-ridge-vippro.png 504w\" sizes=\"auto, (max-width: 200px) 100vw, 200px\" \/><\/figure><\/td><\/tr><tr><td><span style=\"font-weight: 400;\">inset<\/span><\/td><td><span style=\"font-weight: 400;\">T\u1ea1o hi\u1ec7u \u1ee9ng l\u00f5m 3D cho border, gi\u1ed1ng nh\u01b0 ph\u1ea7n t\u1eed \u0111\u01b0\u1ee3c \u0111\u1eb7t v\u00e0o b\u00ean trong.<\/span><\/td><td><span style=\"font-weight: 400;\"> <figure><img loading=\"lazy\" decoding=\"async\" class=\"size-thumbnail wp-image-73283 alignleft\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-inset-vippro-200x113.png\" alt=\"\" width=\"200\" height=\"113\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-inset-vippro-200x113.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-inset-vippro-300x169.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-inset-vippro-100x56.png 100w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-inset-vippro.png 496w\" sizes=\"auto, (max-width: 200px) 100vw, 200px\" \/><\/figure><\/span><\/td><\/tr><tr><td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">outset<\/span><\/p>\n<\/td><td><span style=\"font-weight: 400;\">T\u1ea1o hi\u1ec7u \u1ee9ng n\u1ed5i 3D cho border, gi\u1ed1ng nh\u01b0 ph\u1ea7n t\u1eed \u0111\u01b0\u1ee3c d\u1eadp n\u1ed5i l\u00ean.<\/span><\/td><td><figure><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-thumbnail wp-image-73282\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-outset-vippro-200x116.png\" alt=\"\" width=\"200\" height=\"116\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-outset-vippro-200x116.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-outset-vippro-300x173.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-outset-vippro-100x58.png 100w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-outset-vippro.png 502w\" sizes=\"auto, (max-width: 200px) 100vw, 200px\" \/><\/figure><\/td><\/tr><tr><td><span style=\"font-weight: 400;\">hidden<\/span><\/td><td><span style=\"font-weight: 400;\">Border \u1ea9n.<\/span><\/td><td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">&nbsp;<\/span><\/p>\n<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5 thi\u1ebft l\u1eadp border-style l\u00e0 dashed (n\u00e9t \u0111\u1ee9t):<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">&lt;!DOCTYPE html&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;html&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;head&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;style&gt;<\/span>\n\n<span style=\"font-weight: 400;\">body {<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;background-color:#E7E9EB;<\/span>\n\n<span style=\"font-weight: 400;\">}<\/span>\n\n<span style=\"font-weight: 400;\">#myDIV {<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;width:100%;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;height:300px;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;background-color:#FFFFFF;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;border:5px solid;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;<\/span><span style=\"font-weight: 400;\">border-style: dashed;<\/span>\n\n<span style=\"font-weight: 400;\">}<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/style&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/head&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;body&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;h1&gt;Thu\u1ed9c t\u00ednh border-style&lt;\/h1&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;div id=\"myDIV\"&gt;<\/span>\n\n<span style=\"font-weight: 400;\">V\u00ed d\u1ee5 v\u1ec1 c\u00e1ch thi\u1ebft l\u1eadp thu\u1ed9c t\u00ednh border-style l\u00e0 dashed (n\u00e9t \u0111\u1ee9t).<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/div&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/body&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/html&gt;<\/span><\/code><\/pre>\n\n\n\n<p><b>L\u01b0u \u00fd: <\/b><span style=\"font-weight: 400;\">Hi\u1ec7u \u1ee9ng c\u1ee7a c\u00e1c gi\u00e1 tr\u1ecb groove, ridge, inset v\u00e0 outset ph\u1ee5 thu\u1ed9c v\u00e0o gi\u00e1 tr\u1ecb \u0111\u01b0\u1ee3c thi\u1ebft l\u1eadp cho thu\u1ed9c t\u00ednh border-color (m\u00e0u border). N\u1ebfu kh\u00f4ng thi\u1ebft l\u1eadp border-color, border m\u1eb7c \u0111\u1ecbnh s\u1ebd c\u00f3 m\u00e0u \u0111en.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Thu\u1ed9c t\u00ednh border-style c\u00f3 th\u1ec3 ch\u1ee9a t\u1eeb m\u1ed9t \u0111\u1ebfn b\u1ed1n gi\u00e1 tr\u1ecb, x\u00e1c \u0111\u1ecbnh ki\u1ec3u \u0111\u01b0\u1eddng vi\u1ec1n cho t\u1eebng c\u1ea1nh c\u1ee7a m\u1ed9t ph\u1ea7n t\u1eed.<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">N\u1ebfu ch\u1ec9 \u0111\u1ecbnh m\u1ed9t gi\u00e1 tr\u1ecb, border s\u1ebd \u00e1p d\u1ee5ng cho t\u1ea5t c\u1ea3 c\u00e1c c\u1ea1nh c\u1ee7a ph\u1ea7n t\u1eed.<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">N\u1ebfu ch\u1ec9 \u0111\u1ecbnh hai gi\u00e1 tr\u1ecb, gi\u00e1 tr\u1ecb \u0111\u1ea7u ti\u00ean \u00e1p d\u1ee5ng cho c\u1ea1nh tr\u00ean v\u00e0 d\u01b0\u1edbi, gi\u00e1 tr\u1ecb th\u1ee9 hai \u00e1p d\u1ee5ng cho c\u1ea1nh tr\u00e1i v\u00e0 ph\u1ea3i c\u1ee7a border.<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">N\u1ebfu ch\u1ec9 \u0111\u1ecbnh ba gi\u00e1 tr\u1ecb, gi\u00e1 tr\u1ecb \u0111\u1ea7u ti\u00ean \u00e1p d\u1ee5ng cho c\u1ea1nh tr\u00ean, gi\u00e1 tr\u1ecb th\u1ee9 hai \u00e1p d\u1ee5ng cho c\u1ea1nh tr\u00e1i v\u00e0 ph\u1ea3i, gi\u00e1 tr\u1ecb th\u1ee9 ba \u00e1p d\u1ee5ng cho c\u1ea1nh d\u01b0\u1edbi c\u1ee7a border.<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">N\u1ebfu ch\u1ec9 \u0111\u1ecbnh b\u1ed1n gi\u00e1 tr\u1ecb, theo th\u1ee9 t\u1ef1 t\u1eeb tr\u00e1i sang ph\u1ea3i, ch\u00fang l\u1ea7n l\u01b0\u1ee3t \u00e1p d\u1ee5ng cho c\u1ea1nh tr\u00ean, ph\u1ea3i, d\u01b0\u1edbi v\u00e0 tr\u00e1i c\u1ee7a border.<\/span><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cach-xac-d\u1ecbnh-thu\u1ed9c-tinh-chi\u1ec1u-r\u1ed9ng-border-css-v\u1edbi-border-width\"><span class=\"ez-toc-section\" id=\"Cach_xac_dinh_thuoc_tinh_chieu_rong_border_CSS_voi_border-width\"><\/span><b>C\u00e1ch x\u00e1c \u0111\u1ecbnh thu\u1ed9c t\u00ednh chi\u1ec1u r\u1ed9ng border CSS v\u1edbi border-width<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>border-width: medium | thin | thick | length;<\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Thu\u1ed9c t\u00ednh CSS border-width ch\u1ec9 \u0111\u1ecbnh chi\u1ec1u r\u1ed9ng c\u1ee7a border. B\u1ea1n c\u00f3 th\u1ec3 \u0111\u1eb7t thu\u1ed9c t\u00ednh n\u00e0y b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng gi\u00e1 tr\u1ecb t\u1eeb kh\u00f3a ho\u1eb7c gi\u00e1 tr\u1ecb \u0111\u1ed9 d\u00e0i.&nbsp;<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Gi\u00e1 tr\u1ecb t\u1eeb kh\u00f3a<\/b><span style=\"font-weight: 400;\">:\u00a0 thin, medium, thick,\u2026<\/span><\/li>\n\n\n\n<li><b>Gi\u00e1 tr\u1ecb \u0111\u1ed9 d\u00e0i: <\/b><span style=\"font-weight: 400;\">\u00a0px, pt, em, rem, vh,\u2026<\/span><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><b>Gi\u00e1 tr\u1ecb<\/b><\/td><td><b>M\u00f4 t\u1ea3<\/b><\/td><td><b>Hi\u1ec3n th\u1ecb<\/b><\/td><\/tr><tr><td><span style=\"font-weight: 400;\">medium<\/span><\/td><td><span style=\"font-weight: 400;\">Gi\u00e1 tr\u1ecb m\u1eb7c \u0111\u1ecbnh, border c\u00f3 \u0111\u1ed9 d\u00e0y v\u1eeba ph\u1ea3i.<\/span><\/td><td><figure><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-73295 size-medium alignleft\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-medium-vippro-300x39.jpg\" alt=\"\" width=\"300\" height=\"39\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-medium-vippro-300x39.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-medium-vippro-700x91.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-medium-vippro-200x26.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-medium-vippro-100x13.jpg 100w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-medium-vippro.jpg 1276w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/figure><\/td><\/tr><tr><td><span style=\"font-weight: 400;\">thin<\/span><\/td><td><span style=\"font-weight: 400;\">Border m\u1ecfng.<\/span><\/td><td><span style=\"font-weight: 400;\"> <figure><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-73294\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-thin-vippro-300x35.jpg\" alt=\"\" width=\"300\" height=\"35\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-thin-vippro-300x35.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-thin-vippro-700x83.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-thin-vippro-200x24.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-thin-vippro-100x12.jpg 100w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-thin-vippro.jpg 1272w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/figure><\/span><\/td><\/tr><tr><td><span style=\"font-weight: 400;\">thick<\/span><\/td><td><span style=\"font-weight: 400;\">Border d\u00e0y.<\/span><\/td><td><span style=\"font-weight: 400;\"> <figure><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-73293 alignleft\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-thick-vippro-300x40.jpg\" alt=\"\" width=\"300\" height=\"40\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-thick-vippro-300x40.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-thick-vippro-700x94.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-thick-vippro-200x27.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-thick-vippro-100x13.jpg 100w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-thick-vippro.jpg 1266w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/figure><\/span><\/td><\/tr><tr><td><span style=\"font-weight: 400;\">length<\/span><\/td><td><span style=\"font-weight: 400;\">Cho ph\u00e9p b\u1ea1n x\u00e1c \u0111\u1ecbnh \u0111\u1ed9 d\u00e0y c\u1ee5 th\u1ec3 c\u1ee7a border b\u1eb1ng c\u00e1c \u0111\u01a1n v\u1ecb nh\u01b0 px, em, rem,\u2026<\/span><\/td><td><span style=\"font-weight: 400;\"> <figure><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-73292 alignleft\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-length-vippro-300x47.jpg\" alt=\"\" width=\"300\" height=\"47\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-length-vippro-300x47.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-length-vippro-700x110.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-length-vippro-200x31.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-length-vippro-100x16.jpg 100w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-length-vippro.jpg 1238w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/figure><\/span><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><b>L\u01b0u \u00fd: <\/b><span style=\"font-weight: 400;\">Thu\u1ed9c t\u00ednh border-width kh\u00f4ng ho\u1ea1t \u0111\u1ed9ng n\u1ebfu \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng ri\u00eang l\u1ebb. B\u1ea1n c\u1ea7n s\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh border-style \u0111\u1ec3 thi\u1ebft l\u1eadp ki\u1ec3u border tr\u01b0\u1edbc, sau \u0111\u00f3 l\u00e0 border-width.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5 thi\u1ebft l\u1eadp border-style l\u00e0 double (vi\u1ec1n \u0111\u00f4i) v\u00e0 border-width l\u00e0 thick (vi\u1ec1n d\u00e0y):<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">&lt;!DOCTYPE html&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;html&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;head&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;style&gt;<\/span>\n\n<span style=\"font-weight: 400;\">body {<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;background-color:#E7E9EB;<\/span>\n\n<span style=\"font-weight: 400;\">}<\/span>\n\n<span style=\"font-weight: 400;\">#myDIV {<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;width:100%;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;height:300px;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;background-color:#FFFFFF;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;border: 5px solid;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;border-style: double;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;<\/span><span style=\"font-weight: 400;\">border-width: thick;<\/span>\n\n<span style=\"font-weight: 400;\">}<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/style&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/head&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;body&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;h1&gt;Thu\u1ed9c t\u00ednh border-width&lt;\/h1&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;div id=\"myDIV\"&gt;<\/span>\n\n<span style=\"font-weight: 400;\">V\u00ed d\u1ee5 v\u1ec1 c\u00e1ch thi\u1ebft l\u1eadp thu\u1ed9c t\u00ednh border-width l\u00e0 thick (vi\u1ec1n d\u00e0y).<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/div&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/body&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/html&gt;<\/span><\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Gi\u1ed1ng nh\u01b0 thu\u1ed9c t\u00ednh border-style, thu\u1ed9c t\u00ednh border-width c\u00f3 th\u1ec3 c\u00f3 t\u1eeb m\u1ed9t \u0111\u1ebfn b\u1ed1n gi\u00e1 tr\u1ecb.&nbsp;<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">N\u1ebfu ch\u1ec9 c\u00f3 m\u1ed9t gi\u00e1 tr\u1ecb \u0111\u01b0\u1ee3c x\u00e1c \u0111\u1ecbnh th\u00ec gi\u00e1 tr\u1ecb \u0111\u00f3 s\u1ebd \u00e1p d\u1ee5ng cho t\u1ea5t c\u1ea3 c\u00e1c c\u1ea1nh c\u1ee7a ph\u1ea7n t\u1eed.\u00a0<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">N\u1ebfu hai gi\u00e1 tr\u1ecb \u0111\u01b0\u1ee3c x\u00e1c \u0111\u1ecbnh th\u00ec gi\u00e1 tr\u1ecb \u0111\u1ea7u ti\u00ean bi\u1ec3u th\u1ecb \u0111\u1ed9 r\u1ed9ng border tr\u00ean v\u00e0 d\u01b0\u1edbi, gi\u00e1 tr\u1ecb th\u1ee9 hai bi\u1ec3u th\u1ecb \u0111\u1ed9 r\u1ed9ng border b\u00ean ph\u1ea3i v\u00e0 b\u00ean tr\u00e1i.\u00a0<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">N\u1ebfu ba gi\u00e1 tr\u1ecb \u0111\u01b0\u1ee3c x\u00e1c \u0111\u1ecbnh, gi\u00e1 tr\u1ecb \u0111\u1ea7u ti\u00ean bi\u1ec3u th\u1ecb chi\u1ec1u r\u1ed9ng border tr\u00ean c\u00f9ng, gi\u00e1 tr\u1ecb th\u1ee9 hai bi\u1ec3u th\u1ecb b\u00ean tr\u00e1i v\u00e0 b\u00ean ph\u1ea3i, gi\u00e1 tr\u1ecb th\u1ee9 ba bi\u1ec3u th\u1ecb chi\u1ec1u r\u1ed9ng border d\u01b0\u1edbi c\u00f9ng.\u00a0<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">N\u1ebfu b\u1ed1n gi\u00e1 tr\u1ecb \u0111\u01b0\u1ee3c x\u00e1c \u0111\u1ecbnh, ch\u00fang t\u01b0\u01a1ng \u1ee9ng l\u00e0 tr\u00ean, ph\u1ea3i, d\u01b0\u1edbi v\u00e0 tr\u00e1i.<\/span><\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Tham kh\u1ea3o vi\u1ec7c l\u00e0m <a href=\"https:\/\/itviec.com\/viec-lam-it\/frontend-developer\/ha-noi?utm_medium=anchor_text_mid&amp;utm_source=blog&amp;utm_campaign=lap_trinh_vien_frontend&amp;utm_content=border_css\" target=\"_blank\" rel=\"noreferrer noopener\">L\u1eadp tr\u00ecnh vi\u00ean Frontend<\/a> t\u1ea1i H\u00e0 N\u1ed9i<br>Tham kh\u1ea3o vi\u1ec7c l\u00e0m <a href=\"https:\/\/itviec.com\/viec-lam-it\/frontend-developer\/ho-chi-minh-hcm?utm_medium=anchor_text_mid&amp;utm_source=blog&amp;utm_campaign=lap_trinh_vien_frontend&amp;utm_content=border_css\" target=\"_blank\" rel=\"noreferrer noopener\">L\u1eadp tr\u00ecnh vi\u00ean Frontend<\/a> t\u1ea1i H\u1ed3 Ch\u00ed Minh<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cach-xac-d\u1ecbnh-thu\u1ed9c-tinh-mau-border-css-v\u1edbi-border-color\"><span class=\"ez-toc-section\" id=\"Cach_xac_dinh_thuoc_tinh_mau_border_CSS_voi_border-color\"><\/span><b>C\u00e1ch x\u00e1c \u0111\u1ecbnh thu\u1ed9c t\u00ednh m\u00e0u border CSS v\u1edbi border-color<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>border-color: color | transparent;<\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Thu\u1ed9c t\u00ednh border-color d\u00f9ng \u0111\u1ec3 thi\u1ebft l\u1eadp m\u00e0u s\u1eafc c\u1ee7a vi\u1ec1n h\u1ed9p. B\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng t\u00ean m\u00e0u, m\u00e3 m\u00e0u hex, gi\u00e1 tr\u1ecb RGB\/RGBA ho\u1eb7c HSL\/HSLA \u0111\u1ec3 khai b\u00e1o thu\u1ed9c t\u00ednh n\u00e0y.<\/span><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><b>Gi\u00e1 tr\u1ecb<\/b><\/td><td><b>M\u00f4 t\u1ea3<\/b><\/td><td><b>Hi\u1ec3n th\u1ecb<\/b><\/td><\/tr><tr><td><span style=\"font-weight: 400;\">color<\/span><\/td><td><span style=\"font-weight: 400;\">M\u00e0u vi\u1ec1n s\u1ebd tr\u00f9ng v\u1edbi m\u00e0u c\u1ee7a ch\u00ednh element \u0111\u00f3.<\/span><\/td><td><figure><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-73298 size-medium alignnone\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-colored-vippro-300x37.png\" alt=\"\" width=\"300\" height=\"37\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-colored-vippro-300x37.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-colored-vippro-700x87.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-colored-vippro-200x25.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-colored-vippro-100x12.png 100w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-colored-vippro.png 1268w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/figure><\/td><\/tr><tr><td><span style=\"font-weight: 400;\">transparent<\/span><\/td><td><span style=\"font-weight: 400;\">Thi\u1ebft l\u1eadp vi\u1ec1n trong su\u1ed1t.<\/span><\/td><td><span style=\"font-weight: 400;\"> <figure><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-73297 alignleft\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-transparent-vippro-300x42.jpg\" alt=\"\" width=\"300\" height=\"42\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-transparent-vippro-300x42.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-transparent-vippro-700x98.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-transparent-vippro-200x28.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-transparent-vippro-100x14.jpg 100w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-transparent-vippro.jpg 1240w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/figure><\/span><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5 c\u00e1c ki\u1ec3u khai b\u00e1o thu\u1ed9c t\u00ednh border-color:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><b>HTML<\/b><\/td><td><b>CSS<\/b><\/td><\/tr><tr><td>&lt;p class=&#8221;colorname&#8221;&gt;Border \u0111\u01b0\u1ee3c t\u1ea1o b\u1edfi t\u00ean m\u00e0u s\u1eafc&lt;\/p&gt;<br>&lt;p class=&#8221;hex&#8221;&gt;Border \u0111\u01b0\u1ee3c t\u1ea1o b\u1edfi m\u00e3 hex&lt;\/p&gt;<br>&lt;p class=&#8221;rgb&#8221;&gt;Border \u0111\u01b0\u1ee3c t\u1ea1o b\u1edfi m\u00e3 m\u00e0u RGB&lt;\/p&gt;<br>&lt;p class=&#8221;hsla&#8221;&gt;Border \u0111\u01b0\u1ee3c t\u1ea1o b\u1edfi m\u00e3 m\u00e0u HSLA&lt;\/p&gt;<br>&lt;p class=&#8221;threevalues&#8221;&gt;Border \u0111\u01b0\u1ee3c t\u1ea1o b\u1edfi ba gi\u00e1 tr\u1ecb m\u00e0u&lt;\/p&gt;<\/td><td>\n<p style=\"text-align: left;\">length {<\/p>\n<p style=\"text-align: left;\">border: 2px solid #00A4BD;<\/p>\n<p style=\"text-align: left;\">padding: 10px;<\/p>\n<p style=\"text-align: left;\">}<\/p>\n<p style=\"text-align: left;\">percent {<\/p>\n<p style=\"text-align: left;\">border: 2px solid #00A4BD;<\/p>\n<p style=\"text-align: left;\">padding: 5%;<\/p>\n<p style=\"text-align: left;\">}<\/p>\n<p style=\"text-align: left;\">.twovalues {<\/p>\n<p style=\"text-align: left;\">border: 2px solid #00A4BD;<\/p>\n<p style=\"text-align: left;\">padding: 25px 2px;<\/p>\n<p style=\"text-align: left;\">}<\/p>\n<p style=\"text-align: left;\">\/* Other styling *\/<\/p>\n<p style=\"text-align: left;\">p {<\/p>\n<p style=\"text-align: left;\">font-family: Arial;<\/p>\n<p style=\"text-align: left;\">}.colorname {<br>border: 2px groove blue;<br>}<br>.hex {<br>border: 2px ridge #00A4BD;<br>}<br>.rgb {<br>border: 2px inset rgb(150,100,255);<br>}<br>.hsla {<br>border: 2px outset hsla(0,60%,70%, .5);<br>}<br>.threevalues {<br>border-width: 2px;<br>border-style: solid;<br>border-color: #00A4BD #33475B #FF7A59;<br>}<\/p>\n<p style=\"text-align: left;\">\/* Other styling *\/<br>p {<br>font-family: Arial;<br>}<\/p>\n<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><strong>H\u00ecnh k\u1ebft qu\u1ea3:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"2926\" height=\"426\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-color-vippro.png\" alt=\"\" class=\"wp-image-73299\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-color-vippro.png 2926w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-color-vippro-300x44.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-color-vippro-1600x233.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-color-vippro-200x29.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-color-vippro-100x15.png 100w\" sizes=\"auto, (max-width: 2926px) 100vw, 2926px\" \/><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\"><b>L\u01b0u \u00fd<\/b>: Gi\u1ed1ng v\u1edbi border-style (ki\u1ec3u vi\u1ec1n) v\u00e0 border-width (\u0111\u1ed9 r\u1ed9ng vi\u1ec1n), border-color c\u0169ng c\u00f3 th\u1ec3 nh\u1eadn t\u1eeb m\u1ed9t \u0111\u1ebfn b\u1ed1n gi\u00e1 tr\u1ecb.<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Ch\u1ec9 \u0111\u1ecbnh m\u1ed9t gi\u00e1 tr\u1ecb:<\/b><span style=\"font-weight: 400;\"> M\u00e0u s\u1eafc \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng cho t\u1ea5t c\u1ea3 c\u00e1c c\u1ea1nh c\u1ee7a h\u1ed9p.<\/span><\/li>\n\n\n\n<li><b>Ch\u1ec9 \u0111\u1ecbnh hai gi\u00e1 tr\u1ecb: <\/b><span style=\"font-weight: 400;\">Gi\u00e1 tr\u1ecb th\u1ee9 nh\u1ea5t cho m\u00e0u vi\u1ec1n tr\u00ean v\u00e0 d\u01b0\u1edbi, gi\u00e1 tr\u1ecb th\u1ee9 hai cho m\u00e0u vi\u1ec1n tr\u00e1i v\u00e0 ph\u1ea3i.<\/span><\/li>\n\n\n\n<li><b>Ch\u1ec9 \u0111\u1ecbnh ba gi\u00e1 tr\u1ecb:<\/b><span style=\"font-weight: 400;\"> Gi\u00e1 tr\u1ecb th\u1ee9 nh\u1ea5t cho m\u00e0u vi\u1ec1n tr\u00ean, gi\u00e1 tr\u1ecb th\u1ee9 hai cho m\u00e0u vi\u1ec1n tr\u00e1i v\u00e0 ph\u1ea3i, gi\u00e1 tr\u1ecb th\u1ee9 ba cho m\u00e0u vi\u1ec1n d\u01b0\u1edbi.<\/span><\/li>\n\n\n\n<li><b>Ch\u1ec9 \u0111\u1ecbnh b\u1ed1n gi\u00e1 tr\u1ecb: <\/b><span style=\"font-weight: 400;\">Theo th\u1ee9 t\u1ef1 t\u01b0\u01a1ng \u1ee9ng v\u1edbi m\u00e0u vi\u1ec1n tr\u00ean, ph\u1ea3i, d\u01b0\u1edbi, tr\u00e1i.<\/span><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cach-them-ph\u1ea7n-d\u1ec7m-cho-border-css-border-padding\"><span class=\"ez-toc-section\" id=\"Cach_them_phan_dem_cho_border_CSS_border_padding\"><\/span><b>C\u00e1ch th\u00eam ph\u1ea7n \u0111\u1ec7m cho border CSS (border padding)<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Thu\u1ed9c t\u00ednh padding trong CSS t\u1ea1o ra kho\u1ea3ng c\u00e1ch gi\u1eefa n\u1ed9i dung c\u1ee7a m\u1ed9t ph\u1ea7n t\u1eed v\u00e0 vi\u1ec1n c\u1ee7a ph\u1ea7n t\u1eed \u0111\u00f3. N\u1ebfu thu\u1ed9c t\u00ednh padding kh\u00f4ng \u0111\u01b0\u1ee3c x\u00e1c \u0111\u1ecbnh, th\u00ec kh\u00f4ng c\u00f3 kho\u1ea3ng c\u00e1ch n\u00e0o gi\u1eefa n\u1ed9i dung v\u00e0 vi\u1ec1n.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">\u0110\u1ec3 th\u00eam kho\u1ea3ng c\u00e1ch, b\u1ea1n c\u00f3 th\u1ec3 \u0111\u1eb7t thu\u1ed9c t\u00ednh padding b\u1eb1ng c\u00e1c gi\u00e1 tr\u1ecb \u0111\u1ed9 d\u00e0i ho\u1eb7c ph\u1ea7n tr\u0103m. C\u00e1c gi\u00e1 tr\u1ecb ph\u1ea3i l\u00e0 s\u1ed1 nguy\u00ean d\u01b0\u01a1ng.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><b>HTML<\/b><\/td><td><b>CSS<\/b><\/td><\/tr><tr><td><span style=\"font-weight: 400;\">&lt;p class=&#8221;length&#8221;&gt;\u0110o\u1ea1n v\u0103n n\u00e0y c\u00f3 border-style l\u00e0 solid (li\u1ec1n m\u1ea1ch) v\u00e0 kho\u1ea3ng padding l\u00e0 10px.&lt;\/p&gt;<\/span>\n<p><span style=\"font-weight: 400;\">&lt;p class=&#8221;percent&#8221;&gt;\u0110o\u1ea1n v\u0103n n\u00e0y c\u00f3 border-style l\u00e0 solid (li\u1ec1n m\u1ea1ch) v\u00e0 kho\u1ea3ng padding b\u1eb1ng 5% chi\u1ec1u r\u1ed9ng c\u1ee7a ph\u1ea7n t\u1eed cha.&lt;\/p&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">&lt;p class=&#8221;twovalues&#8221;&gt;\u0110o\u1ea1n v\u0103n n\u00e0y c\u00f3 border-style l\u00e0 solid (li\u1ec1n m\u1ea1ch), kho\u1ea3ng padding tr\u00ean v\u00e0 d\u01b0\u1edbi l\u00e0 25px, kho\u1ea3ng padding tr\u00e1i v\u00e0 ph\u1ea3i l\u00e0 2px.&lt;\/p&gt;<\/span><\/p>\n<\/td><td>.length {<br>border: 2px solid #00A4BD;<br>padding: 10px;<br>}<br>.percent {<br>border: 2px solid #00A4BD;<br>padding: 5%;<br>}<br>.twovalues {<br>border: 2px solid #00A4BD;<br>padding: 25px 2px;<br>}\/* Other styling *\/<br>p {<br>font-family: Arial;<br>}<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><strong>H\u00ecnh k\u1ebft qu\u1ea3:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"2928\" height=\"702\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-padding-vippro.png\" alt=\"\" class=\"wp-image-73300\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-padding-vippro.png 2928w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-padding-vippro-300x72.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-padding-vippro-1600x384.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-padding-vippro-200x48.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-padding-vippro-100x24.png 100w\" sizes=\"auto, (max-width: 2928px) 100vw, 2928px\" \/><\/figure>\n\n\n\n<p><b>L\u01b0u \u00fd<\/b><span style=\"font-weight: 400;\">: Gi\u1ed1ng nh\u01b0 c\u00e1c thu\u1ed9c t\u00ednh tr\u00ean, thu\u1ed9c t\u00ednh padding c\u00f3 th\u1ec3 c\u00f3 t\u1eeb m\u1ed9t \u0111\u1ebfn b\u1ed1n gi\u00e1 tr\u1ecb.<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">N\u1ebfu ch\u1ec9 c\u00f3 m\u1ed9t gi\u00e1 tr\u1ecb \u0111\u01b0\u1ee3c x\u00e1c \u0111\u1ecbnh th\u00ec gi\u00e1 tr\u1ecb \u0111\u00f3 s\u1ebd \u00e1p d\u1ee5ng cho t\u1ea5t c\u1ea3 c\u00e1c c\u1ea1nh c\u1ee7a ph\u1ea7n t\u1eed.\u00a0<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">N\u1ebfu hai gi\u00e1 tr\u1ecb \u0111\u01b0\u1ee3c x\u00e1c \u0111\u1ecbnh th\u00ec gi\u00e1 tr\u1ecb \u0111\u1ea7u ti\u00ean bi\u1ec3u th\u1ecb ph\u1ea7n \u0111\u1ec7m tr\u00ean v\u00e0 d\u01b0\u1edbi v\u00e0 gi\u00e1 tr\u1ecb th\u1ee9 hai bi\u1ec3u th\u1ecb ph\u1ea7n \u0111\u1ec7m b\u00ean ph\u1ea3i v\u00e0 b\u00ean tr\u00e1i.\u00a0<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">N\u1ebfu ba gi\u00e1 tr\u1ecb \u0111\u01b0\u1ee3c x\u00e1c \u0111\u1ecbnh, gi\u00e1 tr\u1ecb \u0111\u1ea7u ti\u00ean bi\u1ec3u th\u1ecb ph\u1ea7n \u0111\u1ec7m tr\u00ean c\u00f9ng, gi\u00e1 tr\u1ecb th\u1ee9 hai bi\u1ec3u th\u1ecb ph\u1ea7n b\u00ean tr\u00e1i v\u00e0 b\u00ean ph\u1ea3i v\u00e0 gi\u00e1 tr\u1ecb th\u1ee9 t\u01b0 bi\u1ec3u th\u1ecb ph\u1ea7n \u0111\u1ec7m d\u01b0\u1edbi c\u00f9ng.<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">N\u1ebfu b\u1ed1n gi\u00e1 tr\u1ecb \u0111\u01b0\u1ee3c x\u00e1c \u0111\u1ecbnh, ch\u00fang t\u01b0\u01a1ng \u1ee9ng l\u00e0 tr\u00ean, ph\u1ea3i, d\u01b0\u1edbi v\u00e0 tr\u00e1i.<\/span><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cach-them-box-shadow-cho-border-css-border-shadow\"><span class=\"ez-toc-section\" id=\"Cach_them_box-shadow_cho_border_CSS_border_shadow\"><\/span><b>C\u00e1ch th\u00eam box-shadow cho border CSS (border shadow)<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Thu\u1ed9c t\u00ednh box-shadow c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng c\u00f9ng v\u1edbi thu\u1ed9c t\u00ednh border \u0111\u1ec3 t\u1ea1o hi\u1ec7u \u1ee9ng \u0111\u1ed5 b\u00f3ng. \u0110\u1ec3 thi\u1ebft l\u1eadp box-shadow, b\u1ea1n c\u1ea7n hai gi\u00e1 tr\u1ecb b\u1eaft bu\u1ed9c:&nbsp;<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>h-offset<\/b><span style=\"font-weight: 400;\">: Gi\u00e1 tr\u1ecb n\u00e0y x\u00e1c \u0111\u1ecbnh \u0111\u1ed9 l\u1ec7ch ngang c\u1ee7a b\u00f3ng. Gi\u00e1 tr\u1ecb d\u01b0\u01a1ng s\u1ebd \u0111\u1eb7t b\u00f3ng \u1edf ph\u00eda b\u00ean ph\u1ea3i c\u1ee7a h\u1ed9p, c\u00f2n gi\u00e1 tr\u1ecb \u00e2m s\u1ebd \u0111\u1eb7t b\u00f3ng \u1edf ph\u00eda b\u00ean tr\u00e1i.<\/span><\/li>\n\n\n\n<li><b>v-offset<\/b><span style=\"font-weight: 400;\">: Gi\u00e1 tr\u1ecb n\u00e0y x\u00e1c \u0111\u1ecbnh \u0111\u1ed9 l\u1ec7ch d\u1ecdc c\u1ee7a b\u00f3ng. Gi\u00e1 tr\u1ecb d\u01b0\u01a1ng s\u1ebd \u0111\u1eb7t b\u00f3ng \u1edf ph\u00eda d\u01b0\u1edbi c\u1ee7a h\u1ed9p, c\u00f2n gi\u00e1 tr\u1ecb \u00e2m s\u1ebd \u0111\u1eb7t b\u00f3ng \u1edf ph\u00eda tr\u00ean.<\/span><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">Ngo\u00e0i ra, b\u1ea1n c\u00f3 th\u1ec3 th\u00eam b\u1ed1n gi\u00e1 tr\u1ecb t\u00f9y ch\u1ecdn \u0111\u1ec3 \u0111i\u1ec1u ch\u1ec9nh border shadow:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Blur<\/b><span style=\"font-weight: 400;\">: Th\u00eam gi\u00e1 tr\u1ecb th\u1ee9 ba \u0111\u1ec3 t\u1ea1o hi\u1ec7u \u1ee9ng m\u1edd. S\u1ed1 c\u00e0ng l\u1edbn, b\u00f3ng c\u00e0ng m\u1edd.<\/span><\/li>\n\n\n\n<li><b>Spread<\/b><span style=\"font-weight: 400;\">: Th\u00eam gi\u00e1 tr\u1ecb th\u1ee9 t\u01b0 \u0111\u1ec3 x\u00e1c \u0111\u1ecbnh \u0111\u1ed9 lan c\u1ee7a b\u00f3ng. Gi\u00e1 tr\u1ecb d\u01b0\u01a1ng s\u1ebd l\u00e0m b\u00f3ng l\u1edbn h\u01a1n, c\u00f2n gi\u00e1 tr\u1ecb \u00e2m s\u1ebd l\u00e0m b\u00f3ng nh\u1ecf h\u01a1n.<\/span><\/li>\n\n\n\n<li><b>Color<\/b><span style=\"font-weight: 400;\">: Th\u00eam t\u00ean m\u00e0u, m\u00e3 hex ho\u1eb7c gi\u00e1 tr\u1ecb m\u00e0u kh\u00e1c \u0111\u1ec3 x\u00e1c \u0111\u1ecbnh m\u00e0u c\u1ee7a b\u00f3ng. N\u1ebfu kh\u00f4ng th\u00eam gi\u00e1 tr\u1ecb m\u00e0u, b\u00f3ng s\u1ebd c\u00f3 m\u00e0u c\u1ee7a v\u0103n b\u1ea3n.<\/span><\/li>\n\n\n\n<li><b>Inset<\/b><span style=\"font-weight: 400;\">: Th\u00eam t\u1eeb kh\u00f3a inset \u0111\u1ec3 \u0111\u1eb7t b\u00f3ng b\u00ean trong h\u1ed9p.<\/span><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">Trong tr\u01b0\u1eddng h\u1ee3p mu\u1ed1n t\u1ea1o nhi\u1ec1u b\u00f3ng c\u00f9ng l\u00fac, b\u1ea1n ch\u1ec9 c\u1ea7n t\u00e1ch c\u00e1c b\u1ed9 gi\u00e1 tr\u1ecb b\u1eb1ng d\u1ea5u ph\u1ea9y. \u0110\u1ed3ng th\u1eddi, \u0111\u1eebng qu\u00ean t\u0103ng gi\u00e1 tr\u1ecb h-offset v\u00e0 v-offset cho t\u1eebng shadow \u0111\u1ec3 ch\u00fang kh\u00f4ng ch\u1ed3ng l\u00ean nhau.<\/span><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>\u0110\u1ecdc th\u00eam: <a href=\"https:\/\/itviec.com\/blog\/box-shadow-css\/\" target=\"_blank\" rel=\"noopener\"><strong>T\u1ed5ng h\u1ee3p 7 c\u00e1ch d\u00f9ng box shadow CSS c\u01a1 b\u1ea3n<\/strong><\/a><\/em><\/p>\n<\/blockquote>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><b>HTML<\/b><\/td><td><b>CSS<\/b><\/td><\/tr><tr><td><span style=\"font-weight: 400;\">&lt;p class=&#8221;shadow&#8221;&gt;Box n\u1ed9i dung n\u00e0y c\u00f3 b\u00f3ng \u0111\u1ed5.&lt;\/p&gt;<\/span>\n<p><span style=\"font-weight: 400;\">&lt;p class=&#8221;blur&#8221;&gt;Box n\u1ed9i dung n\u00e0y c\u00f3 b\u00f3ng \u0111\u1ed5 m\u1edd (blur).&lt;\/p&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">&lt;p class=&#8221;spread1&#8243;&gt;Box n\u1ed9i dung n\u00e0y c\u00f3 b\u00f3ng \u0111\u1ed5 v\u1edbi b\u00e1n k\u00ednh t\u1ea3n r\u1ed9ng (spread radius) d\u01b0\u01a1ng.&lt;\/p&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">&lt;p class=&#8221;spread2&#8243;&gt;Box n\u1ed9i dung n\u00e0y c\u00f3 b\u00f3ng \u0111\u1ed5 v\u1edbi b\u00e1n k\u00ednh t\u1ea3n r\u1ed9ng (spread radius) \u00e2m.&lt;\/p&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">&lt;p class=&#8221;colorshadow&#8221;&gt;Box n\u1ed9i dung n\u00e0y c\u00f3 ph\u1ea7n b\u00f3ng \u0111\u1ed5 \u0111\u01b0\u1ee3c x\u00e1c \u0111\u1ecbnh m\u00e0u s\u1eafc.&lt;\/p&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">&lt;p class=&#8221;inset&#8221;&gt;Box n\u1ed9i dung n\u00e0y c\u00f3 ph\u1ea7n b\u00f3ng \u0111\u1ed5 l\u1ed3ng v\u00e0o trong.&lt;\/p&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">&lt;p class=&#8221;multiple&#8221;&gt;Box n\u1ed9i dung n\u00e0y c\u00f3 nhi\u1ec1u b\u00f3ng \u0111\u1ed5.&lt;\/p&gt;<\/span><\/p>\n<\/td><td>\n<p style=\"text-align: left;\">.shadow {<br>border: 2px solid;<br>padding: 10px;<br>box-shadow: 6px 4px;<br>}<br>.blur {<br>border: 2px solid;<br>padding: 10px;<br>box-shadow: 6px 4px 8px;<br>}<br>.spread1 {<br>border: 2px solid;<br>padding: 10px;<br>box-shadow: 6px 4px 8px 4px;<br>}<br>.spread2 {<br>border: 2px solid;<br>padding: 10px;<br>box-shadow: 6px 4px 8px -2px;<br>}<br>.colorshadow {<br>border: 2px solid #00A4BD;<br>padding: 10px;<br>box-shadow: 6px 4px #00A4BD;<br>}<br>.inset {<br>border: 2px solid;<br>padding: 10px;<br>box-shadow: 6px 4px inset;<br>}<br>.multiple {<br>border: 1px solid;<br>padding: 10px;<br>box-shadow: 4px 4px #00A4BD, 8px 8px #FF7A59, 12px 12px #334758;<br>}<\/p>\n<p style=\"text-align: left;\">\/* Other styling *\/<br>p {<br>font-family: Arial;<br>}<\/p>\n<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><strong>H\u00ecnh k\u1ebft qu\u1ea3:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image alignleft\"><img loading=\"lazy\" decoding=\"async\" width=\"2932\" height=\"906\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-shadow-vippro.png\" alt=\"\" class=\"wp-image-73301\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-shadow-vippro.png 2932w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-shadow-vippro-300x93.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-shadow-vippro-1600x494.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-shadow-vippro-200x62.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-shadow-vippro-100x31.png 100w\" sizes=\"auto, (max-width: 2932px) 100vw, 2932px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cach-d\u1eb7t-hinh-\u1ea3nh-lam-border-image-border\"><span class=\"ez-toc-section\" id=\"Cach_dat_hinh_anh_lam_border_image_border\"><\/span><b>C\u00e1ch \u0111\u1eb7t h\u00ecnh \u1ea3nh l\u00e0m border (image border)<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>border-image: url(hinh_anh.png) &#91;slice] &#91;repeat]&#91;width] &#91;outset];<\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Thu\u1ed9c t\u00ednh border-image trong CSS cho ph\u00e9p b\u1ea1n s\u1eed d\u1ee5ng h\u00ecnh \u1ea3nh l\u00e0m border thay v\u00ec s\u1eed d\u1ee5ng border truy\u1ec1n th\u1ed1ng. Ch\u1ec9 c\u1ea7n \u0111\u1ecbnh ngh\u0129a ba thu\u1ed9c t\u00ednh n\u00e0y khi s\u1eed d\u1ee5ng border-image:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>border-image-source: <\/b><span style=\"font-weight: 400;\">Thu\u1ed9c t\u00ednh n\u00e0y quy \u0111\u1ecbnh URL \u1ea3nh ho\u1eb7c \u0111\u01b0\u1eddng d\u1eabn \u0111\u1ebfn file \u1ea3nh \u0111\u01b0\u1ee3c d\u00f9ng l\u00e0m vi\u1ec1n cho element.<\/span><\/li>\n\n\n\n<li><b>border-image-slice<\/b><span style=\"font-weight: 400;\">: Thu\u1ed9c t\u00ednh n\u00e0y thi\u1ebft l\u1eadp c\u00e1ch c\u1eaft l\u00e1t h\u00ecnh \u1ea3nh vi\u1ec1n.<\/span><\/li>\n\n\n\n<li><b>border-image-repeat: <\/b><span style=\"font-weight: 400;\">Thu\u1ed9c t\u00ednh n\u00e0y quy \u0111\u1ecbnh c\u00e1ch l\u1eb7p l\u1ea1i \u1ea3nh vi\u1ec1n, gi\u00e3n \u1ea3nh vi\u1ec1n ho\u1eb7c bo tr\u00f2n c\u00e1c g\u00f3c c\u1ee7a \u1ea3nh vi\u1ec1n.<\/span><\/li>\n\n\n\n<li><b>border-image-width:<\/b><span style=\"font-weight: 400;\"> Thu\u1ed9c t\u00ednh n\u00e0y x\u00e1c \u0111\u1ecbnh \u0111\u1ed9 r\u1ed9ng c\u1ee7a \u0111\u01b0\u1eddng vi\u1ec1n \u0111\u01b0\u1ee3c t\u1ea1o t\u1eeb \u1ea3nh. Gi\u00e1 tr\u1ecb c\u00f3 th\u1ec3 l\u00e0 \u0111\u01a1n v\u1ecb \u0111\u1ed9 d\u00e0i ho\u1eb7c ph\u1ea7n tr\u0103m.<\/span><\/li>\n\n\n\n<li><b>border-image-outset: <\/b><span style=\"font-weight: 400;\">Thu\u1ed9c t\u00ednh n\u00e0y x\u00e1c \u0111\u1ecbnh kho\u1ea3ng c\u00e1ch t\u1eeb c\u1ea1nh c\u1ee7a ph\u1ea7n t\u1eed \u0111\u1ebfn \u0111\u01b0\u1eddng vi\u1ec1n \u0111\u01b0\u1ee3c t\u1ea1o t\u1eeb \u1ea3nh. Gi\u00e1 tr\u1ecb c\u00f3 th\u1ec3 l\u00e0 \u0111\u01a1n v\u1ecb \u0111\u1ed9 d\u00e0i ho\u1eb7c ph\u1ea7n tr\u0103m.<\/span><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><b>HTML<\/b><\/td><td><b>CSS<\/b><\/td><\/tr><tr><td><span style=\"font-weight: 400;\">&lt;p class=&#8221;stretch&#8221;&gt;\u0110\u00e2y l\u00e0 vi\u1ec1n \u1ea3nh (image border) \u0111\u01b0\u1ee3c k\u00e9o gi\u00e3n. V\u00ec k\u00e9o gi\u00e3n l\u00e0 gi\u00e1 tr\u1ecb m\u1eb7c \u0111\u1ecbnh n\u00ean b\u1ea1n c\u00f3 th\u1ec3 b\u1ecf qua n\u00f3 trong CSS.&lt;\/p&gt;<\/span>\n<p><span style=\"font-weight: 400;\">&lt;p class=&#8221;repeat&#8221;&gt;\u0110\u00e2y l\u00e0 vi\u1ec1n \u1ea3nh \u0111\u01b0\u1ee3c l\u1eb7p l\u1ea1i.&lt;\/p&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">&lt;p class=&#8221;round&#8221;&gt;\u0110\u00e2y l\u00e0 vi\u1ec1n \u1ea3nh \u0111\u01b0\u1ee3c bo tr\u00f2n. V\u1edbi thu\u1ed9c t\u00ednh n\u00e0y, h\u00ecnh \u1ea3nh s\u1ebd \u0111\u01b0\u1ee3c l\u1eafp gh\u00e9p ho\u1eb7c l\u1eb7p l\u1ea1i \u0111\u1ec3 l\u1ea5p \u0111\u1ea7y khu v\u1ef1c b\u1eb1ng m\u1ed9t s\u1ed1 nguy\u00ean. Tr\u01b0\u1eddng h\u1ee3p ng\u01b0\u1ee3c l\u1ea1i, h\u00ecnh \u1ea3nh s\u1ebd \u0111\u01b0\u1ee3c \u0111i\u1ec1u ch\u1ec9nh k\u00edch th\u01b0\u1edbc \u0111\u1ec3 v\u1eeba kh\u00edt.&lt;\/p&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">&lt;p class=&#8221;percent&#8221;&gt;\u0110\u00e2y l\u00e0 vi\u1ec1n \u1ea3nh bo tr\u00f2n v\u1edbi thu\u1ed9c t\u00ednh border-slice-property \u0111\u01b0\u1ee3c x\u00e1c \u0111\u1ecbnh b\u1eb1ng t\u1ef7 l\u1ec7 ph\u1ea7n tr\u0103m.&lt;\/p&gt;<\/span><\/p>\n<\/td><td>.stretch {<br>border: 8px solid transparent;<br>padding: 10px;<br>border-image: url(https:\/\/img.freepik.com\/free-photo\/programming-background-collage_23-2149901771.jpg) 50;<br>}.repeat {<br>border: 8px solid transparent;<br>padding: 10px;<br>border-image: url(https:\/\/img.freepik.com\/free-photo\/programming-background-collage_23-2149901771.jpg) 50 repeat;<br>}.round {<br>border: 8px solid transparent;<br>padding: 10px;<br>border-image: url(https:\/\/img.freepik.com\/free-photo\/programming-background-collage_23-2149901771.jpg) 50 round;<br>}.percent {<br>border: 8px solid transparent;<br>padding: 10px;<br>border-image: url(https:\/\/img.freepik.com\/free-photo\/programming-background-collage_23-2149901771.jpg) 20% round;<br>}\n<p style=\"text-align: left;\">\/* Other styling *\/<br>p {<br>font-family: Arial;<br>}<\/p>\n<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><strong>H\u00ecnh k\u1ebft qu\u1ea3:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"144\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-hinh-anh-vippro-scaled.jpg\" alt=\"\" class=\"wp-image-73326\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-hinh-anh-vippro-scaled.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-hinh-anh-vippro-300x67.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-hinh-anh-vippro-200x45.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-hinh-anh-vippro-100x22.jpg 100w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n\n\n\n<p>&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cach-di\u1ec1u-ch\u1ec9nh-gradient-cho-border-css-border-gradient\"><span class=\"ez-toc-section\" id=\"Cach_dieu_chinh_gradient_cho_border_CSS_border_gradient\"><\/span><b>C\u00e1ch \u0111i\u1ec1u ch\u1ec9nh gradient cho border CSS (border gradient)<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">B\u1ea1n c\u0169ng c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh border-image trong CSS \u0111\u1ec3 t\u1ea1o vi\u1ec1n b\u1eb1ng gradient. Tuy nhi\u00ean, c\u1ea7n l\u01b0u \u00fd r\u1eb1ng c\u00e1ch n\u00e0y kh\u00f4ng th\u1ef1c s\u1ef1 t\u1ea1o gradient cho \u0111\u01b0\u1eddng vi\u1ec1n m\u00e0 l\u00e0 s\u1eed d\u1ee5ng h\u00ecnh \u1ea3nh gradient \u0111\u1ec3 m\u00f4 ph\u1ecfng hi\u1ec7u \u1ee9ng vi\u1ec1n gradient.<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">\u0110\u1ec3 t\u1ea1o vi\u1ec1n gradient, h\u00e3y \u0111\u1eb7t gi\u00e1 tr\u1ecb c\u1ee7a border-image th\u00e0nh &#8220;linear-gradient&#8221; ho\u1eb7c &#8220;repeating-linear-gradient&#8221;.\u00a0<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Sau \u0111\u00f3, trong d\u1ea5u ngo\u1eb7c \u0111\u01a1n, th\u00eam c\u00e1c \u0111i\u1ec3m d\u1eebng m\u00e0u theo \u00fd mu\u1ed1n.\u00a0<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">B\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng b\u1ea5t k\u1ef3 t\u1ed5 h\u1ee3p n\u00e0o c\u1ee7a t\u00ean m\u00e0u HTML, m\u00e3 m\u00e0u hex, m\u00e3 m\u00e0u RGB v\u00e0 gi\u00e1 tr\u1ecb m\u00e0u HSL.<\/span><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">Cu\u1ed1i c\u00f9ng, c\u1ea7n thi\u1ebft l\u1eadp gi\u00e1 tr\u1ecb cho thu\u1ed9c t\u00ednh border-image-slice \u0111\u1ec3 hi\u1ec3n th\u1ecb vi\u1ec1n gradient. L\u01b0u \u00fd r\u1eb1ng \u0111\u1ec3 vi\u1ec1n gradient hi\u1ec3n th\u1ecb, b\u1ea1n c\u0169ng c\u1ea7n c\u00e0i \u0111\u1eb7t thu\u1ed9c t\u00ednh border.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><b> HTML<\/b><\/td><td><b>CSS<\/b><\/td><\/tr><tr><td><span style=\"font-weight: 400;\">&lt;p class=&#8221;gradient1&#8243;&gt;\u0110\u00e2y l\u00e0 m\u1ed9t border gradient.&lt;\/p&gt;<\/span>\n<p><span style=\"font-weight: 400;\">&lt;p class=&#8221;gradient2&#8243;&gt;\u0110\u00e2y l\u00e0 m\u1ed9t border gradient l\u1eb7p l\u1ea1i.&lt;\/p&gt;<\/span><\/p>\n<\/td><td>\n<p style=\"text-align: left;\">.gradient1 {<br>border: 8px solid;<br>padding: 10px;<br>border-image: linear-gradient(45deg, #FFFFFF, rgb(255, 122, 89)) 10;<br>}<br>.gradient2 {<br>border: 8px solid;<br>padding: 10px;<br>border-image: repeating-linear-gradient(to bottom right, #33475b, #0033CC, #FF77CC, rgb(255, 122, 89)) 20;<br>}<\/p>\n<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><strong>H\u00ecnh k\u1ebft qu\u1ea3:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-gradient-vippro-scaled.jpg\" alt=\"\" class=\"wp-image-73304\"\/><\/figure>\n\n\n\n<p><b>L\u01b0u \u00fd:<\/b><span style=\"font-weight: 400;\"> border-image kh\u00f4ng \u0111\u01b0\u1ee3c h\u1ed7 tr\u1ee3 \u0111\u1ea7y \u0111\u1ee7 tr\u00ean t\u1ea5t c\u1ea3 tr\u00ecnh duy\u1ec7t. Do \u0111\u00f3, b\u1ea1n n\u00ean c\u00e2n nh\u1eafc s\u1eed d\u1ee5ng gi\u1ea3i ph\u00e1p thay th\u1ebf b\u1eb1ng gradient CSS truy\u1ec1n th\u1ed1ng (background-image) n\u1ebfu c\u1ea7n \u0111\u1ea3m b\u1ea3o t\u00ednh t\u01b0\u01a1ng th\u00edch r\u1ed9ng r\u00e3i.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cach-t\u1ea1o-border-css-c\u1ea1nh-tron-v\u1edbi-border-radius\"><span class=\"ez-toc-section\" id=\"Cach_tao_border_CSS_canh_tron_voi_border_radius\"><\/span><b>C\u00e1ch t\u1ea1o border CSS c\u1ea1nh tr\u00f2n v\u1edbi border radius<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Thu\u1ed9c t\u00ednh border-radius trong CSS cho ph\u00e9p b\u1ea1n t\u1ea1o c\u00e1c g\u00f3c bo tr\u00f2n cho vi\u1ec1n c\u1ee7a m\u1ed9t th\u00e0nh ph\u1ea7n. B\u1ea1n c\u00f3 th\u1ec3 thi\u1ebft l\u1eadp thu\u1ed9c t\u00ednh n\u00e0y b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng c\u00e1c gi\u00e1 tr\u1ecb \u0111\u1ed9 d\u00e0i. Gi\u00e1 tr\u1ecb c\u00e0ng cao, c\u00e1c g\u00f3c s\u1ebd c\u00e0ng tr\u00f2n.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>border-radius: &lt;border-radius>;<\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Trong \u0111\u00f3, &lt;border-radius&gt; l\u00e0 m\u1ed9t gi\u00e1 tr\u1ecb \u0111\u1ed9 d\u00e0i (v\u00ed d\u1ee5: 5px, 10%, 0.5em). Gi\u00e1 tr\u1ecb n\u00e0y s\u1ebd \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng cho t\u1ea5t c\u1ea3 c\u00e1c g\u00f3c c\u1ee7a element.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">T\u01b0\u01a1ng t\u1ef1 nh\u01b0 c\u00e1c thu\u1ed9c t\u00ednh border-style, border-width, border-color v\u00e0 padding, border-radius c\u00f3 th\u1ec3 ch\u1ee9a t\u1eeb m\u1ed9t \u0111\u1ebfn b\u1ed1n gi\u00e1 tr\u1ecb.<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>M\u1ed9t gi\u00e1 tr\u1ecb:<\/b><span style=\"font-weight: 400;\"> \u00c1p d\u1ee5ng cho t\u1ea5t c\u1ea3 c\u00e1c g\u00f3c c\u1ee7a element.<\/span><\/li>\n\n\n\n<li><b>Hai gi\u00e1 tr\u1ecb:<\/b><span style=\"font-weight: 400;\"> Gi\u00e1 tr\u1ecb th\u1ee9 nh\u1ea5t cho g\u00f3c tr\u00ean c\u00f9ng b\u00ean tr\u00e1i v\u00e0 g\u00f3c d\u01b0\u1edbi c\u00f9ng b\u00ean ph\u1ea3i, gi\u00e1 tr\u1ecb th\u1ee9 hai cho g\u00f3c d\u01b0\u1edbi c\u00f9ng b\u00ean tr\u00e1i v\u00e0 g\u00f3c tr\u00ean c\u00f9ng b\u00ean ph\u1ea3i.<\/span><\/li>\n\n\n\n<li><b>Ba gi\u00e1 tr\u1ecb: <\/b><span style=\"font-weight: 400;\">Gi\u00e1 tr\u1ecb th\u1ee9 nh\u1ea5t cho g\u00f3c tr\u00ean c\u00f9ng b\u00ean ph\u1ea3i, gi\u00e1 tr\u1ecb th\u1ee9 hai cho g\u00f3c d\u01b0\u1edbi c\u00f9ng b\u00ean tr\u00e1i v\u00e0 g\u00f3c tr\u00ean c\u00f9ng b\u00ean ph\u1ea3i, gi\u00e1 tr\u1ecb th\u1ee9 ba cho g\u00f3c d\u01b0\u1edbi c\u00f9ng b\u00ean ph\u1ea3i.<\/span><\/li>\n\n\n\n<li><b>B\u1ed1n gi\u00e1 tr\u1ecb: <\/b><span style=\"font-weight: 400;\">Theo th\u1ee9 t\u1ef1 g\u00f3c tr\u00ean b\u00ean tr\u00e1i, g\u00f3c tr\u00ean b\u00ean ph\u1ea3i, g\u00f3c d\u01b0\u1edbi b\u00ean ph\u1ea3i v\u00e0 g\u00f3c d\u01b0\u1edbi b\u00ean tr\u00e1i.<\/span><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><b>HTML<\/b><\/td><td><b>CSS<\/b><\/td><\/tr><tr><td><span style=\"font-weight: 400;\">&lt;p class=&#8221;default&#8221;&gt;Border kh\u00f4ng c\u00f3 c\u1ea1nh tr\u00f2n&lt;\/p&gt;<\/span>\n<p><span style=\"font-weight: 400;\">&lt;p class=&#8221;rounded&#8221;&gt;Border c\u00f3 c\u1ea1nh tr\u00f2n.&lt;\/p&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">&lt;p class=&#8221;rounder&#8221;&gt;Border c\u00f3 g\u00f3c tr\u00f2n h\u01a1n.&lt;\/p&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">&lt;p class=&#8221;multiple&#8221;&gt;Border c\u00f3 c\u00e1c g\u00f3c tr\u00f2n kh\u00e1c nhau.&lt;\/p&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">&lt;p class=&#8221;hidden&#8221;&gt;Border c\u00f3 c\u00e1c g\u00f3c tr\u00f2n xung quanh ph\u1ea7n t\u1eed m\u00e0u.&lt;\/p&gt;<\/span><\/p>\n<\/td><td>.default {<br>border: 2px solid #00A4BD;<br>padding: 10px;<br>}<br>.rounded {<br>border: 2px solid #00A4BD;<br>padding: 10px;<br>border-radius: 2px;<br>}<br>.rounder {<br>border: 2px solid #00A4BD;<br>padding: 10px;<br>border-radius: 12px;<br>}<br>.multiple {<br>border: 2px solid #00A4BD;<br>padding: 10px;<br>border-radius: 2px 10px;<br>}<br>.hidden {<br>background-color: #00A4BD;<br>border: 2px solid #00A4BD;<br>padding: 10px;<br>border-radius: 1rem;<br>}\/* Other styling *\/<br>p {<br>font-family: Arial;<br>}\n<p style=\"text-align: left;\">&nbsp;<\/p>\n<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><strong>H\u00ecnh k\u1ebft qu\u1ea3:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"2932\" height=\"642\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-radius-vippro.png\" alt=\"\" class=\"wp-image-73307\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-radius-vippro.png 2932w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-radius-vippro-300x66.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-radius-vippro-1600x350.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-radius-vippro-200x44.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-radius-vippro-100x22.png 100w\" sizes=\"auto, (max-width: 2932px) 100vw, 2932px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cach-thu-g\u1ecdn-border-trong-b\u1ea3ng-nbsp\"><span class=\"ez-toc-section\" id=\"Cach_thu_gon_border_trong_bang\"><\/span><b>C\u00e1ch thu g\u1ecdn border trong b\u1ea3ng&nbsp;<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">N\u1ebfu b\u1ea1n \u0111ang t\u1ea1o m\u1ed9t b\u1ea3ng trong HTML v\u00e0 \u0111\u00e3 \u0111\u1eb7t vi\u1ec1n cho c\u00e1c ph\u1ea7n t\u1eed b\u1ea3ng, h\u00e0ng v\u00e0 \u00f4, b\u1ea1n c\u00f3 th\u1ec3 gi\u1eef c\u00e1c vi\u1ec1n t\u00e1ch bi\u1ec7t (separate) ho\u1eb7c g\u1ed9p (collapse) ch\u00fang l\u1ea1i b\u1eb1ng thu\u1ed9c t\u00ednh CSS border-collapse.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5, m\u1ed9t b\u1ea3ng \u0111\u01a1n gi\u1ea3n v\u1edbi thu\u1ed9c t\u00ednh border-collapse \u0111\u01b0\u1ee3c \u0111\u1eb7t l\u00e0 \u201cseparate\u201d s\u1ebd tr\u00f4ng nh\u01b0 sau.&nbsp;<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1386\" height=\"556\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-separate-vippro.png\" alt=\"\" class=\"wp-image-73319\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-separate-vippro.png 1386w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-separate-vippro-300x120.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-separate-vippro-700x281.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-separate-vippro-200x80.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-separate-vippro-100x40.png 100w\" sizes=\"auto, (max-width: 1386px) 100vw, 1386px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Sau \u0111\u00f3, b\u1ea1n \u0111\u1eb7t thu\u1ed9c t\u00ednh border-collapse c\u1ee7a b\u1ea3ng tr\u00ean th\u00e0nh &#8220;collapse&#8221;:&nbsp;<\/span><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><b>HTML<\/b><\/td><td><b>CSS<\/b><\/td><\/tr><tr><td>&lt;table&gt;<br>&lt;tr&gt;<br>&lt;th&gt;Name&lt;\/th&gt;<br>&lt;th&gt;Job Title&lt;\/th&gt;<br>&lt;th&gt;Email address&lt;\/th&gt;<br>&lt;\/tr&gt;<br>&lt;tr&gt;<br>&lt;td&gt;Son Tran&lt;\/td&gt;<br>&lt;td&gt;Product Owner&lt;\/td&gt;<br>&lt;td&gt;@itviec.com&lt;\/td&gt;<br>&lt;\/tr&gt;<br>&lt;tr&gt;<br>&lt;td&gt;Tri Nguyen&lt;\/td&gt;<br>&lt;td&gt;Senior Devloper&lt;\/td&gt;<br>&lt;td&gt;@itviec.com&lt;\/td&gt;<br>&lt;\/tr&gt;<br>&lt;tr&gt;<br>&lt;td&gt;Hiep Dinh&lt;\/td&gt;<br>&lt;td&gt;Tech Lead&lt;\/td&gt;<br>&lt;td&gt;@itviec.com&lt;\/td&gt;<br>&lt;\/tr&gt;<br>&lt;\/table&gt;<\/td><td>table, tr, td {<br>border: 1px solid black;<br>padding: 5px;<br>border-collapse: collapse;<br>}\/* Other styling *\/<br>table {<br>font-family: Arial;<br>}<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\">K\u1ebft qu\u1ea3 l\u00e0 c\u00e1c vi\u1ec1n c\u1ee7a b\u1ea3ng \u0111\u00e3 \u0111\u01b0\u1ee3c g\u1ed9p l\u1ea1i nh\u01b0 h\u00ecnh d\u01b0\u1edbi \u0111\u00e2y:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1520\" height=\"534\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-collapse-vippro.png\" alt=\"\" class=\"wp-image-73320\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-collapse-vippro.png 1520w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-collapse-vippro-300x105.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-collapse-vippro-700x246.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-collapse-vippro-200x70.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/border-css-collapse-vippro-100x35.png 100w\" sizes=\"auto, (max-width: 1520px) 100vw, 1520px\" \/><\/figure>\n\n\n\n<p><b>L\u01b0u \u00fd<\/b><span style=\"font-weight: 400;\">: Gi\u00e1 tr\u1ecb m\u1eb7c \u0111\u1ecbnh c\u1ee7a thu\u1ed9c t\u00ednh n\u00e0y l\u00e0 \u201cseparate\u201d, n\u00ean b\u1ea1n c\u00f3 th\u1ec3 kh\u00f4ng c\u1ea7n khai b\u00e1o n\u00f3 trong CSS. Tuy nhi\u00ean, n\u1ebfu thu\u1ed9c t\u00ednh border-collapse \u0111\u01b0\u1ee3c \u0111\u1eb7t l\u00e0 \u201ccollapse\u201d, thu\u1ed9c t\u00ednh border-radius s\u1ebd kh\u00f4ng c\u00f3 hi\u1ec7u l\u1ef1c. Khi \u0111\u00f3, \u0111\u1ec3 s\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh border-radius, b\u1ea1n c\u1ea7n \u0111i\u1ec1u ch\u1ec9nh thu\u1ed9c t\u00ednh border-collapse th\u00e0nh \u201cseparate\u201d.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cac-cau-h\u1ecfi-th\u01b0\u1eddng-g\u1eb7p-v\u1ec1-border-css\"><span class=\"ez-toc-section\" id=\"Cac_cau_hoi_thuong_gap_ve_border_CSS\"><\/span><b>C\u00e1c c\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 border CSS<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-border-va-outline-co-gi\u1ed1ng-nhau-khong\"><b>Border v\u00e0 outline c\u00f3 gi\u1ed1ng nhau kh\u00f4ng?<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Outline CSS l\u00e0 thu\u1ed9c t\u00ednh \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 \u0111\u1ecbnh d\u1ea1ng c\u00e1c \u0111\u01b0\u1eddng vi\u1ec1n bao ngo\u00e0i c\u1ee7a ph\u1ea7n t\u1eed tr\u00ean website. Tho\u1ea1t nh\u00ecn, border CSS v\u00e0 outline c\u00f3 ph\u1ea7n t\u01b0\u01a1ng \u0111\u1ed3ng nhau. Tuy nhi\u00ean, khi x\u00e9t \u1edf c\u00e1c ti\u00eau ch\u00ed nh\u01b0 k\u00edch th\u01b0\u1edbc, v\u1ecb tr\u00ed c\u00e1c element ti\u1ebfp c\u1eadn, ki\u1ec3u d\u00e1ng c\u00e1c c\u1ea1nh, h\u00ecnh d\u1ea1ng, m\u1ee5c \u0111\u00edch s\u1eed d\u1ee5ng, border CSS v\u00e0 outline c\u00f3 s\u1ef1 kh\u00e1c nhau r\u00f5 r\u00e0ng.<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>K\u00edch th\u01b0\u1edbc:<\/b><span style=\"font-weight: 400;\"> Border l\u00e0 m\u1ed9t ph\u1ea7n c\u1ee7a box-model n\u00ean n\u00f3 chi\u1ebfm m\u1ed9t ph\u1ea7n di\u1ec7n t\u00edch nh\u1ea5t \u0111\u1ecbnh. Trong khi \u0111\u00f3, outline kh\u00f4ng thu\u1ed9c box-model n\u00ean n\u00f3 kh\u00f4ng chi\u1ebfm b\u1ea5t k\u1ef3 di\u1ec7n t\u00edch n\u00e0o.<\/span><\/li>\n\n\n\n<li><b>V\u1ecb tr\u00ed c\u00e1c element l\u00e2n c\u1eadn: <\/b><span style=\"font-weight: 400;\">V\u00ec border c\u00f3 chi\u1ebfm m\u1ed9t ph\u1ea7n di\u1ec7n t\u00edch, n\u00f3 c\u00f3 th\u1ec3 \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn v\u1ecb tr\u00ed c\u1ee7a c\u00e1c element l\u00e2n c\u1eadn. Ng\u01b0\u1ee3c l\u1ea1i, outline kh\u00f4ng chi\u1ebfm di\u1ec7n t\u00edch n\u00ean kh\u00f4ng l\u00e0m \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn v\u1ecb tr\u00ed c\u1ee7a c\u00e1c element l\u00e2n c\u1eadn.<\/span><\/li>\n\n\n\n<li><b>Ki\u1ec3u d\u00e1ng c\u00e1c c\u1ea1nh: <\/b><span style=\"font-weight: 400;\">K\u00edch th\u01b0\u1edbc, m\u00e0u s\u1eafc v\u00e0 ki\u1ec3u d\u00e1ng c\u1ee7a border c\u00f3 th\u1ec3 kh\u00e1c nhau \u1edf m\u1ed7i c\u1ea1nh. Trong khi \u0111\u00f3, c\u00e1c c\u1ea1nh c\u1ee7a outline lu\u00f4n c\u00f3 s\u1ef1 \u0111\u1ed3ng nh\u1ea5t v\u1ec1 k\u00edch th\u01b0\u1edbc, m\u00e0u s\u1eafc v\u00e0 ki\u1ec3u d\u00e1ng.<\/span><\/li>\n\n\n\n<li><b>H\u00ecnh d\u1ea1ng: <\/b><span style=\"font-weight: 400;\">Border lu\u00f4n m\u1eb7c \u0111\u1ecbnh c\u00f3 h\u00ecnh ch\u1eef nh\u1eadt, nh\u01b0ng b\u1ea1n c\u00f3 th\u1ec3 t\u1ea1o h\u00ecnh tr\u00f2n b\u1eb1ng thu\u1ed9c t\u00ednh border-radius. Outline c\u00f3 th\u1ec3 c\u00f3 h\u00ecnh d\u1ea1ng ng\u1eabu nhi\u00ean v\u00ec n\u00f3 lu\u00f4n bao quanh n\u1ed9i dung c\u1ee7a element.\u00a0<\/span><\/li>\n\n\n\n<li><b>M\u1ee5c \u0111\u00edch s\u1eed d\u1ee5ng: <\/b><span style=\"font-weight: 400;\">Border ch\u1ee7 y\u1ebfu \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng cho m\u1ee5c \u0111\u00edch thi\u1ebft k\u1ebf. Trong khi \u0111\u00f3, outline ch\u1ee7 y\u1ebfu \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng cho m\u1ee5c \u0111\u00edch tr\u1ee3 n\u0103ng ho\u1eb7c d\u00f9ng \u0111\u1ec3 g\u1ee1 l\u1ed7i thi\u1ebft k\u1ebf v\u00ec n\u00f3 kh\u00f4ng chi\u1ebfm b\u1ea5t k\u1ef3 di\u1ec7n t\u00edch n\u00e0o.\u00a0<\/span><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-lam-th\u1ebf-nao-d\u1ec3-d\u1eb7t-border-cho-t\u1eebng-c\u1ea1nh-c\u1ee7a-element\"><b>L\u00e0m th\u1ebf n\u00e0o \u0111\u1ec3 \u0111\u1eb7t border cho t\u1eebng c\u1ea1nh c\u1ee7a element?<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">\u0110\u1ec3 \u0111\u1eb7t border cho t\u1eebng c\u1ea1nh c\u1ee7a m\u1ed9t ph\u1ea7n t\u1eed, b\u1ea1n s\u1eed d\u1ee5ng c\u00e1c thu\u1ed9c t\u00ednh border-top, border-right, border-bottom v\u00e0 border-left. Khi s\u1eed d\u1ee5ng c\u00e1c thu\u1ed9c t\u00ednh n\u00e0y, b\u1ea1n c\u00f3 th\u1ec3 thi\u1ebft l\u1eadp ki\u1ec3u, \u0111\u1ed9 d\u00e0y v\u00e0 m\u00e0u s\u1eafc c\u1ee7a border cho t\u1eebng c\u1ea1nh m\u1ed9t c\u00e1ch \u0111\u1ed9c l\u1eadp.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-t\u1ed5ng-k\u1ebft-border-css\"><span class=\"ez-toc-section\" id=\"Tong_ket_border_CSS\"><\/span><b>T\u1ed5ng k\u1ebft border CSS<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Thu\u1ed9c t\u00ednh border CSS l\u00e0m cho n\u1ed9i dung tr\u1edf n\u00ean d\u1ec5 hi\u1ec3u v\u00e0 thu h\u00fat h\u01a1n tr\u00ean trang web. V\u1edbi c\u00e1c thu\u1ed9c t\u00ednh border CSS, vi\u1ec7c t\u1ea1o v\u00e0 t\u00f9y ch\u1ec9nh vi\u1ec1n tr\u1edf n\u00ean v\u00f4 c\u00f9ng d\u1ec5 d\u00e0ng. V\u1edbi hi\u1ec3u bi\u1ebft c\u01a1 b\u1ea3n v\u1ec1 HTML v\u00e0 CSS, b\u1ea1n c\u00f3 th\u1ec3 nhanh ch\u00f3ng v\u00e0 d\u1ec5 d\u00e0ng th\u00eam y\u1ebfu t\u1ed1 thi\u1ebft k\u1ebf n\u00e0y v\u00e0o c\u00e1c trang web c\u1ee7a m\u00ecnh.<\/span><\/p>\n\n\n\n<p>Tham kh\u1ea3o th\u00eam lo\u1ea1t b\u00e0i vi\u1ebft thu\u1ed9c ch\u1ee7 \u0111\u1ec1 CSS:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/itviec.com\/blog\/cursor-css\/\">Cursor CSS l\u00e0 g\u00ec: C\u00fa ph\u00e1p, ph\u00e2n lo\u1ea1i v\u00e0 c\u00e1ch t\u1ea1o Cursor CSS<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/itviec.com\/blog\/flex-css\/\" target=\"_blank\" rel=\"noopener\">Gi\u1ea3i \u0111\u00e1p chi ti\u1ebft 13 thu\u1ed9c t\u00ednh trong Flexbox CSS<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/itviec.com\/blog\/css-selector\/\" target=\"_blank\" rel=\"noopener\">Top 10 CSS selector ph\u1ed5 bi\u1ebfn nh\u1ea5t hi\u1ec7n nay<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/itviec.com\/blog\/position-css\/\" target=\"_blank\" rel=\"noopener\">Hi\u1ec3u r\u00f5 5 gi\u00e1 tr\u1ecb c\u1ee7a thu\u1ed9c t\u00ednh Position CSS<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/itviec.com\/blog\/grid-css\/\" target=\"_blank\" rel=\"noopener\">C\u1ea9m nang s\u1eed d\u1ee5ng Grid CSS c\u01a1 b\u1ea3n<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/itviec.com\/blog\/tailwind-css\/\" target=\"_blank\" rel=\"noopener\">H\u01b0\u1edbng d\u1eabn 3 c\u00e1ch thi\u1ebft l\u1eadp Tailwind CSS chi ti\u1ebft<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/itviec.com\/blog\/animation-css\/\" target=\"_blank\" rel=\"noopener\">T\u1ed5ng h\u1ee3p 11 hi\u1ec7u \u1ee9ng Animation CSS ph\u1ed5 bi\u1ebfn<\/a><\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\"><strong>B\u1ea1n th\u1ea5y b\u00e0i vi\u1ebft hay v\u00e0 h\u1eefu \u00edch? \u0110\u1eebng ng\u1ea1i Share v\u1edbi b\u1ea1n b\u00e8 v\u00e0 \u0111\u1ed3ng nghi\u1ec7p nh\u00e9.<br>V\u00e0 nhanh tay tham kh\u1ea3o <a href=\"https:\/\/itviec.com\/viec-lam-it\/?utm_medium=anchor_text_low&amp;utm_source=blog&amp;utm_campaign=viec_lam_it&amp;utm_content=border_css\" target=\"_blank\" rel=\"noreferrer noopener\">vi\u1ec7c l\u00e0m IT<\/a> \u201cch\u1ea5t\u201d tr\u00ean ITviec!<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Border CSS l\u00e0 m\u1ed9t y\u1ebfu t\u1ed1 quan tr\u1ecdng trong thi\u1ebft k\u1ebf web, \u0111\u00f3ng vai tr\u00f2 trong vi\u1ec7c ph\u00e2n t\u00e1ch v\u00e0 thu h\u00fat s\u1ef1 ch\u00fa \u00fd \u0111\u1ebfn n\u1ed9i dung tr\u00ean trang. Hi\u1ec3u v\u00e0 s\u1eed d\u1ee5ng \u0111\u00fang c\u00e1ch thu\u1ed9c t\u00ednh n\u00e0y kh\u00f4ng ch\u1ec9 gi\u00fap l\u00e0m n\u1ed5i b\u1eadt c\u00e1c th\u00e0nh ph\u1ea7n tr\u00ean trang web m\u00e0 c\u00f2n t\u0103ng c\u01b0\u1eddng [&hellip;]<\/p>\n","protected":false},"author":213,"featured_media":73278,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_gspb_post_css":"","footnotes":""},"categories":[109],"tags":[],"class_list":["post-73258","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-chuyen-mon-it"],"blocksy_meta":[],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.8 (Yoast SEO v27.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Border CSS: H\u01b0\u1edbng d\u1eabn chi ti\u1ebft 9 c\u00e1ch s\u1eed d\u1ee5ng border CSS - ITviec Blog<\/title>\n<meta name=\"description\" content=\"H\u01b0\u1edbng d\u1eabn chi ti\u1ebft 9 c\u00e1ch s\u1eed d\u1ee5ng border CSS cho ph\u1ea7n t\u1eed HTML v\u1edbi border-style, border-color, border-width, border-image, border-padding,...\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/itviec.com\/blog\/border-css\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Border CSS: H\u01b0\u1edbng d\u1eabn chi ti\u1ebft 9 c\u00e1ch s\u1eed d\u1ee5ng border CSS\" \/>\n<meta property=\"og:description\" content=\"Border CSS l\u00e0 m\u1ed9t y\u1ebfu t\u1ed1 quan tr\u1ecdng trong thi\u1ebft k\u1ebf web, \u0111\u00f3ng vai tr\u00f2 trong vi\u1ec7c ph\u00e2n t\u00e1ch v\u00e0 thu h\u00fat s\u1ef1 ch\u00fa \u00fd \u0111\u1ebfn n\u1ed9i dung tr\u00ean trang. Hi\u1ec3u v\u00e0 s\u1eed d\u1ee5ng\" \/>\n<meta property=\"og:url\" content=\"https:\/\/itviec.com\/blog\/border-css\/\" \/>\n<meta property=\"og:site_name\" content=\"ITviec Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ITviec\" \/>\n<meta property=\"article:published_time\" content=\"2024-06-14T10:23:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-20T05:44:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/Thumbnail-border-CSS-vippro.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1500\" \/>\n\t<meta property=\"og:image:height\" content=\"790\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Linh Trao\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ITviec\" \/>\n<meta name=\"twitter:site\" content=\"@ITviec\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"Linh Trao\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"26 ph\u00fat\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Border CSS: H\u01b0\u1edbng d\u1eabn chi ti\u1ebft 9 c\u00e1ch s\u1eed d\u1ee5ng border CSS - ITviec Blog","description":"H\u01b0\u1edbng d\u1eabn chi ti\u1ebft 9 c\u00e1ch s\u1eed d\u1ee5ng border CSS cho ph\u1ea7n t\u1eed HTML v\u1edbi border-style, border-color, border-width, border-image, border-padding,...","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:\/\/itviec.com\/blog\/border-css\/","og_locale":"vi_VN","og_type":"article","og_title":"Border CSS: H\u01b0\u1edbng d\u1eabn chi ti\u1ebft 9 c\u00e1ch s\u1eed d\u1ee5ng border CSS","og_description":"Border CSS l\u00e0 m\u1ed9t y\u1ebfu t\u1ed1 quan tr\u1ecdng trong thi\u1ebft k\u1ebf web, \u0111\u00f3ng vai tr\u00f2 trong vi\u1ec7c ph\u00e2n t\u00e1ch v\u00e0 thu h\u00fat s\u1ef1 ch\u00fa \u00fd \u0111\u1ebfn n\u1ed9i dung tr\u00ean trang. Hi\u1ec3u v\u00e0 s\u1eed d\u1ee5ng","og_url":"https:\/\/itviec.com\/blog\/border-css\/","og_site_name":"ITviec Blog","article_publisher":"https:\/\/www.facebook.com\/ITviec","article_published_time":"2024-06-14T10:23:38+00:00","article_modified_time":"2025-07-20T05:44:09+00:00","og_image":[{"width":1500,"height":790,"url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/Thumbnail-border-CSS-vippro.png","type":"image\/png"}],"author":"Linh Trao","twitter_card":"summary_large_image","twitter_creator":"@ITviec","twitter_site":"@ITviec","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"Linh Trao","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"26 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/itviec.com\/blog\/border-css\/#article","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/border-css\/"},"author":{"name":"Linh Trao","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/6d1bcbfa05475cbc5a2eaf0727501a16"},"headline":"Border CSS: H\u01b0\u1edbng d\u1eabn chi ti\u1ebft 9 c\u00e1ch s\u1eed d\u1ee5ng border CSS","datePublished":"2024-06-14T10:23:38+00:00","dateModified":"2025-07-20T05:44:09+00:00","mainEntityOfPage":{"@id":"https:\/\/itviec.com\/blog\/border-css\/"},"wordCount":5683,"publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"image":{"@id":"https:\/\/itviec.com\/blog\/border-css\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/Thumbnail-border-CSS-vippro.png","articleSection":["Chuy\u00ean m\u00f4n IT"],"inLanguage":"vi"},{"@type":"WebPage","@id":"https:\/\/itviec.com\/blog\/border-css\/","url":"https:\/\/itviec.com\/blog\/border-css\/","name":"Border CSS: H\u01b0\u1edbng d\u1eabn chi ti\u1ebft 9 c\u00e1ch s\u1eed d\u1ee5ng border CSS - ITviec Blog","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/itviec.com\/blog\/border-css\/#primaryimage"},"image":{"@id":"https:\/\/itviec.com\/blog\/border-css\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/Thumbnail-border-CSS-vippro.png","datePublished":"2024-06-14T10:23:38+00:00","dateModified":"2025-07-20T05:44:09+00:00","description":"H\u01b0\u1edbng d\u1eabn chi ti\u1ebft 9 c\u00e1ch s\u1eed d\u1ee5ng border CSS cho ph\u1ea7n t\u1eed HTML v\u1edbi border-style, border-color, border-width, border-image, border-padding,...","breadcrumb":{"@id":"https:\/\/itviec.com\/blog\/border-css\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/itviec.com\/blog\/border-css\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/border-css\/#primaryimage","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/Thumbnail-border-CSS-vippro.png","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/Thumbnail-border-CSS-vippro.png","width":1500,"height":790,"caption":"border css - itviec blog"},{"@type":"BreadcrumbList","@id":"https:\/\/itviec.com\/blog\/border-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Chuy\u00ean m\u00f4n IT","item":"https:\/\/itviec.com\/blog\/chuyen-mon-it\/"},{"@type":"ListItem","position":2,"name":"Border CSS: H\u01b0\u1edbng d\u1eabn chi ti\u1ebft 9 c\u00e1ch s\u1eed d\u1ee5ng border CSS"}]},{"@type":"WebSite","@id":"https:\/\/itviec.com\/blog\/#website","url":"https:\/\/itviec.com\/blog\/","name":"ITviec Blog","description":"IT Jobs &amp; People in Vietnam","publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/itviec.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"vi"},{"@type":"Organization","@id":"https:\/\/itviec.com\/blog\/#organization","name":"ITviec","url":"https:\/\/itviec.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2018\/12\/itviec-black-square-facebook.png","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2018\/12\/itviec-black-square-facebook.png","width":1800,"height":1800,"caption":"ITviec"},"image":{"@id":"https:\/\/itviec.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/ITviec","https:\/\/x.com\/ITviec","https:\/\/www.linkedin.com\/company\/itviec","https:\/\/www.youtube.com\/channel\/UCYthAQ3bcGr57M_ag5gHDvQ"]},{"@type":"Person","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/6d1bcbfa05475cbc5a2eaf0727501a16","name":"Linh Trao","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/trao-thi-tung-linh-author-e1709892478113-100x100.jpg","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/trao-thi-tung-linh-author-e1709892478113-100x100.jpg","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/trao-thi-tung-linh-author-e1709892478113-100x100.jpg","caption":"Linh Trao"},"url":"https:\/\/itviec.com\/blog\/author\/linh-trao\/"}]}},"_links":{"self":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/73258","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/users\/213"}],"replies":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/comments?post=73258"}],"version-history":[{"count":1,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/73258\/revisions"}],"predecessor-version":[{"id":89715,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/73258\/revisions\/89715"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media\/73278"}],"wp:attachment":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media?parent=73258"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/categories?post=73258"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/tags?post=73258"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}