{"id":86055,"date":"2025-04-19T20:21:32","date_gmt":"2025-04-19T13:21:32","guid":{"rendered":"https:\/\/itviecblog.uptech.vn\/?p=86055"},"modified":"2025-06-17T14:54:28","modified_gmt":"2025-06-17T07:54:28","slug":"border-bootstrap-la-gi","status":"publish","type":"post","link":"https:\/\/itviec.com\/blog\/border-bootstrap-la-gi\/","title":{"rendered":"Border Bootstrap l\u00e0 g\u00ec? 10+ c\u00e1ch thi\u1ebft k\u1ebf vi\u1ec1n \u0111\u1eb9p v\u1edbi Bootstrap"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 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-bootstrap-la-gi\/#Border_Bootstrap_la_gi\" >Border Bootstrap 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-bootstrap-la-gi\/#Cac_nhom_class_dinh_dang_border_trong_Bootstrap\" >C\u00e1c nh\u00f3m class \u0111\u1ecbnh d\u1ea1ng border trong Bootstrap<\/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-bootstrap-la-gi\/#Bang_tong_hop_nhanh_cac_loai_dinh_dang_Border_Bootstrap\" >B\u1ea3ng t\u1ed5ng h\u1ee3p nhanh c\u00e1c lo\u1ea1i \u0111\u1ecbnh d\u1ea1ng Border Bootstrap<\/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-bootstrap-la-gi\/#Tuy_chinh_dinh_dang_rieng_cho_border_trong_Bootstrap\" >T\u00f9y ch\u1ec9nh \u0111\u1ecbnh d\u1ea1ng ri\u00eang cho border trong Bootstrap<\/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-bootstrap-la-gi\/#Mot_so_luu_y_khi_su_dung_dinh_dang_border_Bootstrap\" >M\u1ed9t s\u1ed1 l\u01b0u \u00fd khi s\u1eed d\u1ee5ng \u0111\u1ecbnh d\u1ea1ng border Bootstrap<\/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-bootstrap-la-gi\/#Cau_hoi_thuong_gap_ve_border_Bootstrap\" >C\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 border Bootstrap<\/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-bootstrap-la-gi\/#Tong_ket\" >T\u1ed5ng k\u1ebft<\/a><\/li><\/ul><\/nav><\/div>\n<p><em><strong>Bootstrap l\u00e0 m\u1ed9t framework CSS m\u1ea1nh m\u1ebd gi\u00fap vi\u1ec7c thi\u1ebft k\u1ebf giao di\u1ec7n web tr\u1edf n\u00ean d\u1ec5 d\u00e0ng h\u01a1n bao gi\u1edd h\u1ebft. Trong \u0111\u00f3, c\u00e1c ti\u1ec7n \u00edch \u0111\u1ecbnh d\u1ea1ng \u0111\u01b0\u1eddng vi\u1ec1n (border utilities) \u0111\u00f3ng vai tr\u00f2 quan tr\u1ecdng trong vi\u1ec7c l\u00e0m n\u1ed5i b\u1eadt v\u00e0 ph\u00e2n t\u00e1ch c\u00e1c th\u00e0nh ph\u1ea7n trong giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng. T\u00ecm hi\u1ec3u c\u00e1ch \u0111\u1ecbnh d\u1ea1ng border Bootstrap ngay trong b\u00e0i vi\u1ebft n\u00e0y.<\/strong><\/em><\/p>\n<p><span style=\"font-weight: 400;\">\u0110\u1ecdc b\u00e0i vi\u1ebft n\u00e0y \u0111\u1ec3 \u0111\u01b0\u1ee3c h\u01b0\u1edbng d\u1eabn:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Border Bootstrap l\u00e0 g\u00ec<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">C\u00e1c ki\u1ec3u \u0111\u1ecbnh d\u1ea1ng border trong Bootstrap<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Nh\u1eefng l\u01b0u \u00fd khi s\u1eed d\u1ee5ng border trong Bootstrap<\/span><\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Border_Bootstrap_la_gi\"><\/span><b>Border Bootstrap l\u00e0 g\u00ec?<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Border Bootstrap l\u00e0 t\u1eadp h\u1ee3p c\u00e1c l\u1edbp CSS cho ph\u00e9p l\u1eadp tr\u00ecnh vi\u00ean nhanh ch\u00f3ng th\u00eam, x\u00f3a ho\u1eb7c ch\u1ec9nh s\u1eeda vi\u1ec1n v\u00e0 b\u00e1n k\u00ednh vi\u1ec1n (border-radius) tr\u00ean c\u00e1c ph\u1ea7n t\u1eed HTML. Nh\u1eefng l\u1edbp ti\u1ec7n \u00edch \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf \u0111\u1ec3 \u0111\u01a1n gi\u1ea3n h\u00f3a vi\u1ec7c t\u1ea1o ki\u1ec3u v\u00e0 \u0111\u1ea3m b\u1ea3o t\u00ednh nh\u1ea5t qu\u00e1n trong d\u1ef1 \u00e1n.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">V\u1edbi c\u00e1c l\u1edbp border, b\u1ea1n c\u00f3 th\u1ec3 ki\u1ec3m so\u00e1t s\u1ef1 hi\u1ec7n di\u1ec7n, m\u00e0u s\u1eafc, \u0111\u1ed9 d\u00e0y v\u00e0 h\u00ecnh d\u1ea1ng c\u1ee7a vi\u1ec1n, \u0111\u1ed3ng th\u1eddi t\u1ea1o c\u00e1c g\u00f3c bo tr\u00f2n \u0111\u1ec3 t\u0103ng t\u00ednh th\u1ea9m m\u1ef9.<\/span><\/p>\n<blockquote><p><em>\u0110\u1ecdc th\u00eam: <a href=\"\/blog\/bootstrap-la-gi\/\" target=\"_blank\" rel=\"noopener\"><strong>Bootstrap l\u00e0 g\u00ec? 7 t\u00ednh n\u0103ng c\u1ea7n bi\u1ebft trong Bootstrap<\/strong><\/a><\/em><\/p><\/blockquote>\n<h2><span class=\"ez-toc-section\" id=\"Cac_nhom_class_dinh_dang_border_trong_Bootstrap\"><\/span><b>C\u00e1c nh\u00f3m class \u0111\u1ecbnh d\u1ea1ng border trong Bootstrap<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><b>C\u00e1c class border c\u01a1 b\u1ea3n<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Bootstrap cung c\u1ea5p c\u00e1c l\u1edbp gi\u00fap d\u1ec5 d\u00e0ng th\u00eam ho\u1eb7c x\u00f3a border cho ph\u1ea7n t\u1eed, bao g\u1ed3m:<\/span><\/p>\n<h4><strong>Th\u00eam Border<\/strong><\/h4>\n<ul>\n<li><b>.border<\/b><span style=\"font-weight: 400;\">: Th\u00eam border xung quanh ph\u1ea7n t\u1eed<\/span><\/li>\n<li><b>.border-top<\/b><span style=\"font-weight: 400;\">: B\u1ed5 sung border b\u00ean tr\u00ean<\/span><\/li>\n<li><b>.border-bottom<\/b><span style=\"font-weight: 400;\">: B\u1ed5 sung border b\u00ean d\u01b0\u1edbi<\/span><\/li>\n<li><b>.border-start<\/b><span style=\"font-weight: 400;\">: B\u1ed5 sung border b\u00ean tr\u00e1i<\/span><\/li>\n<li><b>.border-end<\/b><span style=\"font-weight: 400;\">: B\u1ed5 sung border b\u00ean ph\u1ea3i<\/span><\/li>\n<\/ul>\n<pre><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"border\"<\/span><span style=\"font-weight: 400;\">&gt;&lt;\/<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"border-top\"<\/span><span style=\"font-weight: 400;\">&gt;&lt;\/<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"border-end\"<\/span><span style=\"font-weight: 400;\">&gt;&lt;\/<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"border-bottom\"<\/span><span style=\"font-weight: 400;\">&gt;&lt;\/<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"border-start\"<\/span><span style=\"font-weight: 400;\">&gt;&lt;\/<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-86125\" src=\"\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-1-vippro.jpg\" alt=\"border bootstrap - itviec blog\" width=\"992\" height=\"240\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-1-vippro.jpg 992w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-1-vippro-300x73.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-1-vippro-768x186.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-1-vippro-200x48.jpg 200w\" sizes=\"auto, (max-width: 992px) 100vw, 992px\" \/><\/p>\n<h4><strong>X\u00f3a Border<\/strong><\/h4>\n<ul>\n<li><b>.border-0<\/b><span style=\"font-weight: 400;\">: Lo\u1ea1i b\u1ecf t\u1ea5t c\u1ea3 border<\/span><\/li>\n<li><b>.border-top-0<\/b><span style=\"font-weight: 400;\">: X\u00f3a border ph\u00eda tr\u00ean<\/span><\/li>\n<li><b>.border-bottom-0<\/b><span style=\"font-weight: 400;\">: X\u00f3a border ph\u00eda d\u01b0\u1edbi<\/span><\/li>\n<li><b>.border-start-0<\/b><span style=\"font-weight: 400;\">: X\u00f3a border b\u00ean tr\u00e1i<\/span><\/li>\n<li><b>.border-end-0<\/b><span style=\"font-weight: 400;\">: X\u00f3a border b\u00ean ph\u1ea3i<\/span><\/li>\n<\/ul>\n<pre><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"border border-0\"<\/span><span style=\"font-weight: 400;\">&gt;&lt;\/<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"border border-top-0\"<\/span><span style=\"font-weight: 400;\">&gt;&lt;\/<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"border border-end-0\"<\/span><span style=\"font-weight: 400;\">&gt;&lt;\/<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"border border-bottom-0\"<\/span><span style=\"font-weight: 400;\">&gt;&lt;\/<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"border border-start-0\"<\/span><span style=\"font-weight: 400;\">&gt;&lt;\/<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-86140\" src=\"\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-2-vippro.jpg\" alt=\"border bootstrap - itviec blog\" width=\"1068\" height=\"252\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Nh\u01b0 h\u00ecnh \u1ea3nh ph\u00eda tr\u00ean, v\u00ed d\u1ee5 tr\u01b0\u1eddng h\u1ee3p b\u1ea1n c\u1ea7n th\u00eam \u0111\u01b0\u1eddng vi\u1ec1n cho ph\u1ea7n t\u1eed ngo\u1ea1i tr\u1eeb \u0111\u01b0\u1eddng vi\u1ec1n top, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng <\/span><span style=\"font-weight: 400;\">border border-top-0<\/span><span style=\"font-weight: 400;\"> thay v\u00ec ph\u1ea3i th\u00eam t\u1eebng border cho t\u1eebng h\u01b0\u1edbng nh\u01b0 khi d\u00f9ng k\u1ebft h\u1ee3p <\/span><span style=\"font-weight: 400;\">border-start border-end border-bottom<\/span><\/p>\n<h3><b>M\u00e0u s\u1eafc border<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">B\u1ea1n c\u00f3 th\u1ec3 d\u1ec5 d\u00e0ng thay \u0111\u1ed5i m\u00e0u s\u1eafc c\u1ee7a \u0111\u01b0\u1eddng vi\u1ec1n b\u1eb1ng c\u00e1c l\u1edbp m\u00e0u t\u00edch h\u1ee3p s\u1eb5n c\u1ee7a Bootstrap, bao g\u1ed3m nh\u1eefng l\u1edbp nh\u01b0:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"border border-primary\"<\/span><span style=\"font-weight: 400;\">&gt;&lt;\/<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"border border-primary-subtle\"<\/span><span style=\"font-weight: 400;\">&gt;&lt;\/<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"border border-secondary\"<\/span><span style=\"font-weight: 400;\">&gt;&lt;\/<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"border border-secondary-subtle\"<\/span><span style=\"font-weight: 400;\">&gt;&lt;\/<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"border border-success\"<\/span><span style=\"font-weight: 400;\">&gt;&lt;\/<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"border border-success-subtle\"<\/span><span style=\"font-weight: 400;\">&gt;&lt;\/<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"border border-danger\"<\/span><span style=\"font-weight: 400;\">&gt;&lt;\/<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"border border-danger-subtle\"<\/span><span style=\"font-weight: 400;\">&gt;&lt;\/<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"border border-warning\"<\/span><span style=\"font-weight: 400;\">&gt;&lt;\/<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"border border-warning-subtle\"<\/span><span style=\"font-weight: 400;\">&gt;&lt;\/<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"border border-info\"<\/span><span style=\"font-weight: 400;\">&gt;&lt;\/<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"border border-info-subtle\"<\/span><span style=\"font-weight: 400;\">&gt;&lt;\/<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"border border-light\"<\/span><span style=\"font-weight: 400;\">&gt;&lt;\/<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"border border-light-subtle\"<\/span><span style=\"font-weight: 400;\">&gt;&lt;\/<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"border border-dark\"<\/span><span style=\"font-weight: 400;\">&gt;&lt;\/<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"border border-dark-subtle\"<\/span><span style=\"font-weight: 400;\">&gt;&lt;\/<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"border border-black\"<\/span><span style=\"font-weight: 400;\">&gt;&lt;\/<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"border border-white\"<\/span><span style=\"font-weight: 400;\">&gt;&lt;\/<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-86139\" src=\"\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-3-vippro.png\" alt=\"border bootstrap - itviec blog\" width=\"1540\" height=\"604\" \/><\/p>\n<h3><b>\u0110\u1ed9 d\u00e0y v\u00e0 \u0111\u1ed9 m\u1edd border<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Bootstrap cung c\u1ea5p c\u00e1c l\u1edbp \u0111\u1ec3 \u0111i\u1ec1u ch\u1ec9nh \u0111\u1ed9 d\u00e0y \u0111\u01b0\u1eddng vi\u1ec1n t\u1eeb 1 \u0111\u1ebfn 5, trong \u0111\u00f3 <\/span><b>border-5<\/b><span style=\"font-weight: 400;\"> c\u00f3 \u0111\u1ed9 d\u00e0y l\u1edbn nh\u1ea5t:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"border border-1\"<\/span><span style=\"font-weight: 400;\">&gt;&lt;\/<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"border border-2\"<\/span><span style=\"font-weight: 400;\">&gt;&lt;\/<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"border border-3\"<\/span><span style=\"font-weight: 400;\">&gt;&lt;\/<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"border border-4\"<\/span><span style=\"font-weight: 400;\">&gt;&lt;\/<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"border border-5\"<\/span><span style=\"font-weight: 400;\">&gt;&lt;\/<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-86138\" src=\"\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-4-vippro.jpg\" alt=\"border bootstrap - itviec blog\" width=\"968\" height=\"238\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-4-vippro.jpg 968w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-4-vippro-300x74.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-4-vippro-768x189.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-4-vippro-200x49.jpg 200w\" sizes=\"auto, (max-width: 968px) 100vw, 968px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Ngo\u00e0i ra, Bootstrap c\u00f2n cung c\u1ea5p c\u00e1c class \u0111\u1ec3 qu\u1ea3n l\u00fd \u0111\u1ed9 \u0111\u1eadm, m\u1edd c\u1ee7a \u0111\u01b0\u1eddng vi\u1ec1n:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">\u00a0 &lt;<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"border border-success\"<\/span><span style=\"font-weight: 400;\">&gt;Border m\u00e0u xanh v\u1edbi m\u1eb7c \u0111\u1ecbnh kh\u00f4ng c\u00f3 \u0111\u1ed9 m\u1edd&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0 &lt;<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"border border-success border-opacity-75\"<\/span><span style=\"font-weight: 400;\">&gt;Border m\u00e0u xanh v\u1edbi \u0111\u1ed9 m\u1edd 75%&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0 &lt;<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"border border-success border-opacity-50\"<\/span><span style=\"font-weight: 400;\">&gt;Border m\u00e0u xanh v\u1edbi \u0111\u1ed9 m\u1edd 50%&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0 &lt;<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"border border-success border-opacity-25\"<\/span><span style=\"font-weight: 400;\">&gt;Border m\u00e0u xanh v\u1edbi \u0111\u1ed9 m\u1edd 25%&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0 &lt;<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\"> class=<\/span><span style=\"font-weight: 400;\">\"border border-success border-opacity-10\"<\/span><span style=\"font-weight: 400;\">&gt;Border m\u00e0u xanh v\u1edbi \u0111\u1ed9 m\u1edd 10%&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-86137\" src=\"\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-5-vippro.png\" alt=\"border bootstrap - itviec blog\" width=\"1132\" height=\"908\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-5-vippro.png 1132w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-5-vippro-300x241.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-5-vippro-768x616.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-5-vippro-200x160.png 200w\" sizes=\"auto, (max-width: 1132px) 100vw, 1132px\" \/><\/p>\n<h3><b>Bo g\u00f3c border (radius)<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Bootstrap h\u1ed7 tr\u1ee3 r\u1ea5t nhi\u1ec1u l\u1edbp bo g\u00f3c \u0111\u1ec3 gi\u00fap ph\u1ea7n t\u1eed tr\u1edf n\u00ean m\u1ec1m m\u1ea1i v\u00e0 \u0111\u1eb9p m\u1eaft h\u01a1n, th\u1eadm ch\u00ed l\u00e0 bo th\u00e0nh h\u00ecnh tr\u00f2n. C\u00e1c t\u00f9y ch\u1ecdn bao g\u1ed3m:<\/span><\/p>\n<h4><b>.rounded<\/b><\/h4>\n<p><span style=\"font-weight: 400;\">Bo tr\u00f2n nh\u1eb9 \u1edf b\u1ed1n g\u00f3c:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-86136\" src=\"\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-6-vippro.jpg\" alt=\"border bootstrap - itviec blog\" width=\"504\" height=\"240\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-6-vippro.jpg 504w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-6-vippro-300x143.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-6-vippro-200x95.jpg 200w\" sizes=\"auto, (max-width: 504px) 100vw, 504px\" \/><\/p>\n<h4><b>.rounded-top<\/b><\/h4>\n<p><span style=\"font-weight: 400;\">Bo tr\u00f2n nh\u1eb9 \u1edf 2 g\u00f3c tr\u00ean:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-86135\" src=\"\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-7-vippro.jpg\" alt=\"border bootstrap - itviec blog\" width=\"484\" height=\"212\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-7-vippro.jpg 484w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-7-vippro-300x131.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-7-vippro-200x88.jpg 200w\" sizes=\"auto, (max-width: 484px) 100vw, 484px\" \/><\/p>\n<h4><b>.rounded-end<\/b><\/h4>\n<p><span style=\"font-weight: 400;\">Bo tr\u00f2n nh\u1eb9 \u1edf 2 g\u00f3c b\u00ean ph\u1ea3i:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-86134\" src=\"\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-8-vippro.jpg\" alt=\"border bootstrap - itviec blog\" width=\"494\" height=\"220\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-8-vippro.jpg 494w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-8-vippro-300x134.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-8-vippro-200x89.jpg 200w\" sizes=\"auto, (max-width: 494px) 100vw, 494px\" \/><\/p>\n<h4><b>.rounded-bottom<\/b><\/h4>\n<p><span style=\"font-weight: 400;\">Bo tr\u00f2n nh\u1eb9 \u1edf 2 g\u00f3c b\u00ean d\u01b0\u1edbi:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-86133\" src=\"\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-9-vippro.jpg\" alt=\"border bootstrap - itviec blog\" width=\"492\" height=\"266\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-9-vippro.jpg 492w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-9-vippro-300x162.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-9-vippro-200x108.jpg 200w\" sizes=\"auto, (max-width: 492px) 100vw, 492px\" \/><\/p>\n<h4><b>.rounded-start<\/b><\/h4>\n<p><span style=\"font-weight: 400;\">Bo tr\u00f2n nh\u1eb9 \u1edf 2 g\u00f3c b\u00ean tr\u00e1i:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-86132\" src=\"\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-10-vippro.jpg\" alt=\"border bootstrap - itviec blog\" width=\"506\" height=\"228\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-10-vippro.jpg 506w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-10-vippro-300x135.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-10-vippro-200x90.jpg 200w\" sizes=\"auto, (max-width: 506px) 100vw, 506px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">\u0110\u1ec3 t\u0103ng k\u00edch th\u01b0\u1edbc g\u00f3c tr\u00f2n, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng c\u00e1c l\u1edbp ti\u1ec7n \u00edch v\u1edbi c\u00fa ph\u00e1p <\/span><b>.round-&lt;number&gt;<\/b><span style=\"font-weight: 400;\">:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400;\">div<\/span> <i><span style=\"font-weight: 400;\">class<\/span><\/i><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">border rounded-0<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">&gt;rounded 0&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400;\">div<\/span> <i><span style=\"font-weight: 400;\">class<\/span><\/i><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">border rounded-1<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">&gt;rounded 1&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400;\">div<\/span> <i><span style=\"font-weight: 400;\">class<\/span><\/i><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">border rounded-2<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">&gt;rounded 2&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400;\">div<\/span> <i><span style=\"font-weight: 400;\">class<\/span><\/i><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">border rounded-3<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">&gt;rounded 3&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400;\">div<\/span> <i><span style=\"font-weight: 400;\">class<\/span><\/i><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">border rounded-4<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">&gt;rounded 4&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400;\">div<\/span> <i><span style=\"font-weight: 400;\">class<\/span><\/i><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">border rounded-5<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">&gt;rounded 5&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">K\u1ebft qu\u1ea3:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-86131\" src=\"\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-11-vippro.jpg\" alt=\"border bootstrap - itviec blog\" width=\"1844\" height=\"318\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-11-vippro.jpg 1844w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-11-vippro-300x52.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-11-vippro-1536x265.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-11-vippro-200x34.jpg 200w\" sizes=\"auto, (max-width: 1844px) 100vw, 1844px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Ngo\u00e0i ra, \u0111\u1ec3 ph\u1ea7n t\u1eed c\u00f3 h\u00ecnh d\u1ea1ng tr\u00f2n ho\u1eb7c b\u1ea7u d\u1ee5c, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400;\">div<\/span> <i><span style=\"font-weight: 400;\">class<\/span><\/i><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">border rounded-circle<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">&gt;&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400;\">div<\/span> <i><span style=\"font-weight: 400;\">class<\/span><\/i><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">border rounded-pill<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">&gt;&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">L\u01b0u \u00fd, n\u1ebfu mu\u1ed1n s\u1eed d\u1ee5ng <\/span><b>rounded-circle <\/b><span style=\"font-weight: 400;\">\u0111\u1ec3 t\u1ea1o h\u00ecnh tr\u00f2n, b\u1ea1n c\u1ea7n \u0111\u1ecbnh d\u1ea1ng chi\u1ec1u r\u1ed9ng v\u00e0 chi\u1ec1u cao c\u1ee7a ph\u1ea7n t\u1eed b\u1eb1ng nhau.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">K\u1ebft qu\u1ea3:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-86130\" src=\"\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-12-vippro.jpg\" alt=\"border bootstrap - itviec blog\" width=\"376\" height=\"518\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-12-vippro.jpg 376w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-12-vippro-218x300.jpg 218w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-12-vippro-145x200.jpg 145w\" sizes=\"auto, (max-width: 376px) 100vw, 376px\" \/><\/p>\n<h3><b>Responsive v\u1edbi border<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">C\u00e1c l\u1edbp ti\u1ec7n \u00edch border c\u1ee7a Bootstrap h\u1ed7 tr\u1ee3 thi\u1ebft k\u1ebf responsive th\u00f4ng qua c\u00e1c l\u1edbp d\u00e0nh ri\u00eang cho t\u1eebng \u0111i\u1ec3m ng\u1eaft (breakpoint). B\u1ea1n c\u00f3 th\u1ec3 th\u00eam ho\u1eb7c x\u00f3a vi\u1ec1n t\u00f9y thu\u1ed9c v\u00e0o k\u00edch th\u01b0\u1edbc m\u00e0n h\u00ecnh b\u1eb1ng c\u00e1c ti\u1ec1n t\u1ed1 nh\u01b0: <\/span><b>sm (\u2265576px), md (\u2265768px), lg (\u2265992px), xl (\u22651200px), xxl (\u22651400px).<\/b><\/p>\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5 v\u1ec1 c\u00e1c breakpoint trong border:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>.border-sm<\/b><span style=\"font-weight: 400;\">: Th\u00eam vi\u1ec1n tr\u00ean m\u00e0n h\u00ecnh nh\u1ecf tr\u1edf l\u00ean.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>.border-md-0<\/b><span style=\"font-weight: 400;\">: X\u00f3a to\u00e0n b\u1ed9 vi\u1ec1n tr\u00ean m\u00e0n h\u00ecnh v\u1eeba tr\u1edf l\u00ean.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>.border-lg-end<\/b><span style=\"font-weight: 400;\">: Th\u00eam vi\u1ec1n ph\u1ea3i tr\u00ean m\u00e0n h\u00ecnh l\u1edbn tr\u1edf l\u00ean.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">T\u00ednh n\u0103ng n\u00e0y r\u1ea5t h\u1eefu \u00edch \u0111\u1ec3 \u0111i\u1ec1u ch\u1ec9nh b\u1ed1 c\u1ee5c theo thi\u1ebft b\u1ecb. Ch\u1eb3ng h\u1ea1n, b\u1ea1n c\u00f3 th\u1ec3 t\u1ea1o vi\u1ec1n ph\u00e2n t\u00e1ch n\u1ed9i dung tr\u00ean \u0111i\u1ec7n tho\u1ea1i nh\u01b0ng x\u00f3a ch\u00fang tr\u00ean m\u00e1y t\u00ednh \u0111\u1ec3 giao di\u1ec7n g\u1ecdn g\u00e0ng h\u01a1n.<\/span><\/p>\n<h3><b>K\u1ebft h\u1ee3p border v\u00e0 shadow<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Trong Bootstrap, <\/span><b>.shadow<\/b><span style=\"font-weight: 400;\"> l\u00e0 m\u1ed9t l\u1edbp ti\u1ec7n \u00edch (utility class) d\u00f9ng \u0111\u1ec3 th\u00eam hi\u1ec7u \u1ee9ng b\u00f3ng \u0111\u1ed5 (box-shadow) cho c\u00e1c ph\u1ea7n t\u1eed HTML, gi\u00fap t\u1ea1o c\u1ea3m gi\u00e1c chi\u1ec1u s\u00e2u v\u00e0 n\u1ed5i b\u1eadt tr\u00ean giao di\u1ec7n. B\u00f3ng \u0111\u1ed5 l\u00e0m cho ph\u1ea7n t\u1eed tr\u00f4ng nh\u01b0 \u201cn\u1ed5i\u201d l\u00ean kh\u1ecfi b\u1ec1 m\u1eb7t, th\u01b0\u1eddng \u0111\u01b0\u1ee3c d\u00f9ng cho c\u00e1c th\u00e0nh ph\u1ea7n nh\u01b0 th\u1ebb (card), n\u00fat, ho\u1eb7c h\u1ed9p n\u1ed9i dung \u0111\u1ec3 t\u0103ng t\u00ednh th\u1ea9m m\u1ef9 v\u00e0 c\u1ea3i thi\u1ec7n tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng.<\/span><\/p>\n<p><b>Border Bootstrap<\/b><span style=\"font-weight: 400;\"> k\u1ebft h\u1ee3p ho\u00e0n h\u1ea3o v\u1edbi c\u00e1c l\u1edbp <\/span><b>.shadow<\/b><span style=\"font-weight: 400;\"> \u0111\u1ec3 t\u1ea1o chi\u1ec1u s\u00e2u v\u00e0 \u0111i\u1ec3m nh\u1ea5n. C\u00e1c l\u1edbp shadow bao g\u1ed3m:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>.shadow-sm<\/b><span style=\"font-weight: 400;\">: \u0110\u1ed5 b\u00f3ng nh\u1ecf<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>.shadow<\/b><span style=\"font-weight: 400;\">: \u0110\u1ed5 b\u00f3ng ti\u00eau chu\u1ea9n<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>.shadow-lg<\/b><span style=\"font-weight: 400;\">: \u0110\u1ed5 b\u00f3ng l\u1edbn<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400;\">div<\/span> <i><span style=\"font-weight: 400;\">class<\/span><\/i><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">border border-primary shadow-sm<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">&gt;b\u00f3ng nh\u1ecf&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400;\">div<\/span> <i><span style=\"font-weight: 400;\">class<\/span><\/i><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">border border-primary shadow<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">&gt;b\u00f3ng ti\u00eau chu\u1ea9n&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400;\">div<\/span> <i><span style=\"font-weight: 400;\">class<\/span><\/i><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">border border-primary shadow-lg<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">&gt;b\u00f3ng l\u1edbn&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">K\u1ebft qu\u1ea3:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-86129\" src=\"\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-13-vippro.jpg\" alt=\"border bootstrap - itviec blog\" width=\"1230\" height=\"336\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-13-vippro.jpg 1230w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-13-vippro-300x82.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-13-vippro-768x210.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-13-vippro-200x55.jpg 200w\" sizes=\"auto, (max-width: 1230px) 100vw, 1230px\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Bang_tong_hop_nhanh_cac_loai_dinh_dang_Border_Bootstrap\"><\/span><b>B\u1ea3ng t\u1ed5ng h\u1ee3p nhanh c\u00e1c lo\u1ea1i \u0111\u1ecbnh d\u1ea1ng Border Bootstrap<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<table>\n<tbody>\n<tr>\n<td><b>Nh\u00f3m ch\u1ee9c n\u0103ng<\/b><\/td>\n<td><b>Class<\/b><\/td>\n<td><b>M\u00f4 t\u1ea3<\/b><\/td>\n<\/tr>\n<tr>\n<td rowspan=\"5\"><b>Th\u00eam border<\/b><\/td>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">.border<\/span><\/td>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">Th\u00eam vi\u1ec1n bao quanh<\/span><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">.border-top<\/span><\/td>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">Th\u00eam vi\u1ec1n b\u00ean tr\u00ean<\/span><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">.border-end<\/span><\/td>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">Th\u00eam vi\u1ec1n b\u00ean ph\u1ea3i<\/span><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">.border-bottom<\/span><\/td>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">Th\u00eam vi\u1ec1n b\u00ean d\u01b0\u1edbi<\/span><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">.border-start<\/span><\/td>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">Th\u00eam vi\u1ec1n b\u00ean tr\u00e1i<\/span><\/td>\n<\/tr>\n<tr>\n<td rowspan=\"5\"><b>X\u00f3a border<\/b><\/td>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">.border-0<\/span><\/td>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">X\u00f3a to\u00e0n b\u1ed9 vi\u1ec1n<\/span><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">.border-top-0<\/span><\/td>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">X\u00f3a vi\u1ec1n b\u00ean tr\u00ean<\/span><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">.border-end-0<\/span><\/td>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">X\u00f3a vi\u1ec1n b\u00ean ph\u1ea3i<\/span><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">.border-bottom-0<\/span><\/td>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">X\u00f3a vi\u1ec1n b\u00ean d\u01b0\u1edbi<\/span><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">.border-start-0<\/span><\/td>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">X\u00f3a vi\u1ec1n b\u00ean tr\u00e1i<\/span><\/td>\n<\/tr>\n<tr>\n<td><b>M\u00e0u s\u1eafc border<\/b><\/td>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">.border-primary, .border-secondary, .border-danger, .border-light, .border-success, .border-warning, .border-info,&#8230;<\/span><\/td>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u0110\u1ed5i m\u00e0u border theo h\u1ec7 th\u1ed1ng theme (primary, danger, success, secondary, warning, \u2026)<\/span><\/td>\n<\/tr>\n<tr>\n<td><b>\u0110\u1ed9 d\u00e0y border<\/b><\/td>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">.border-1, .border-2, .border-3, .border-4, .border-5<\/span><\/td>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">T\u0103ng gi\u1ea3m \u0111\u1ed9 d\u00e0y c\u1ee7a border (v\u1edbi 1 l\u00e0 m\u1ecfng nh\u1ea5t v\u00e0 5 l\u00e0 d\u00e0y nh\u1ea5t)<\/span><\/td>\n<\/tr>\n<tr>\n<td rowspan=\"7\"><b>Bo g\u00f3c (radius)<\/b><\/td>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">.rounded-1, .rounded-2, .rounded-3,&#8230;<\/span><\/td>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">Bo g\u00f3c c\u1ee7a border theo t\u1eebng m\u1ee9c \u0111\u1ed9 t\u0103ng d\u1ea7n<\/span><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">.rounded-top<\/span><\/td>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">Bo tr\u00f2n 2 g\u00f3c tr\u00ean<\/span><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">.rounded-end<\/span><\/td>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">Bo tr\u00f2n 2 g\u00f3c b\u00ean ph\u1ea3i<\/span><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">.rounded-bottom<\/span><\/td>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">Bo tr\u00f2n 2 g\u00f3c d\u01b0\u1edbi<\/span><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">.rounded-start<\/span><\/td>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">Bo tr\u00f2n 2 g\u00f3c b\u00ean tr\u00e1i<\/span><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">.rounded-pill<\/span><\/td>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">Bo g\u00f3c h\u00ecnh vi\u00ean thu\u1ed1c<\/span><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">.rounded-circle<\/span><\/td>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">Bo g\u00f3c ho\u00e0n to\u00e0n th\u00e0nh h\u00ecnh tr\u00f2n (y\u00eau c\u1ea7u chi\u1ec1u r\u1ed9ng v\u00e0 cao b\u1eb1ng nhau)<\/span><\/td>\n<\/tr>\n<tr>\n<td rowspan=\"4\"><b>Responsive border<\/b><\/td>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">.border-{breakpoint}<\/span><\/td>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">Th\u00eam border tr\u00ean c\u00e1c breakpoint c\u1ee5 th\u1ec3 (v\u00ed d\u1ee5: .border-sm, .border-md)<\/span><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">.border-{breakpoint}-0<\/span><\/td>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">X\u00f3a border tr\u00ean c\u00e1c breakpoint c\u1ee5 th\u1ec3 (v\u00ed d\u1ee5: .border-md-0)<\/span><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">.border-{breakpoint}-{side}<\/span><\/td>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">Th\u00eam border cho c\u1ea1nh c\u1ee5 th\u1ec3 tr\u00ean breakpoint (v\u00ed d\u1ee5: .border-lg-end)<\/span><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">.border-{breakpoint}-{side}-0<\/span><\/td>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">X\u00f3a border cho c\u1ea1nh c\u1ee5 th\u1ec3 tr\u00ean breakpoint (v\u00ed d\u1ee5: .border-sm-top-0)<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2><span class=\"ez-toc-section\" id=\"Tuy_chinh_dinh_dang_rieng_cho_border_trong_Bootstrap\"><\/span><b>T\u00f9y ch\u1ec9nh \u0111\u1ecbnh d\u1ea1ng ri\u00eang cho border trong Bootstrap<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">M\u1eb7c d\u00f9 c\u00e1c ti\u1ec7n \u00edch border c\u1ee7a Bootstrap \u0111\u00e1p \u1ee9ng h\u1ea7u h\u1ebft nhu c\u1ea7u, b\u1ea1n c\u00f3 th\u1ec3 c\u1ea7n c\u00e1c ki\u1ec3u \u0111\u1ed9c \u0111\u00e1o nh\u01b0 vi\u1ec1n n\u00e9t \u0111\u1ee9t, ch\u1ea5m, m\u00e0u t\u00f9y ch\u1ec9nh ho\u1eb7c hi\u1ec7u \u1ee9ng gradient. \u0110\u1ec3 th\u1ef1c hi\u1ec7n c\u00e1c \u0111i\u1ec1u ch\u1ec9nh ri\u00eang, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng 2 c\u00e1ch sau:<\/span><\/p>\n<h3><b>S\u1eed d\u1ee5ng CSS t\u00f9y ch\u1ec9nh<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">N\u1ebfu b\u1ea1n ch\u1ec9 c\u1ea7n thay \u0111\u1ed5i \u0111\u01a1n gi\u1ea3n v\u1ec1 ki\u1ec3u vi\u1ec1n nh\u01b0 vi\u1ec1n n\u00e9t \u0111\u1ee9t (dashed), vi\u1ec1n ch\u1ea5m (dotted), ho\u1eb7c \u00e1p d\u1ee5ng m\u00e0u ngo\u00e0i h\u1ec7 th\u1ed1ng theme c\u1ee7a Bootstrap, b\u1ea1n c\u00f3 th\u1ec3 vi\u1ebft th\u00eam class CSS th\u1ee7 c\u00f4ng. V\u00ed d\u1ee5:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">\u00a0<\/span><i><span style=\"font-weight: 400;\">.custom-border-dashed<\/span><\/i><span style=\"font-weight: 400;\"> {<\/span>\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">border<\/span><span style=\"font-weight: 400;\">:<\/span> <span style=\"font-weight: 400;\">2<\/span><span style=\"font-weight: 400;\">px<\/span> <span style=\"font-weight: 400;\">dashed<\/span> <span style=\"font-weight: 400;\">#007bff<\/span><span style=\"font-weight: 400;\">; <\/span><span style=\"font-weight: 400;\">\/* T\u1ea1o vi\u1ec1n n\u00e9t \u0111\u1ee9t *\/<\/span>\n<span style=\"font-weight: 400;\"> }\n<\/span>\n<span style=\"font-weight: 400;\">\u00a0<\/span><i><span style=\"font-weight: 400;\">.custom-border-dotted<\/span><\/i><span style=\"font-weight: 400;\"> {<\/span>\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">border<\/span><span style=\"font-weight: 400;\">:<\/span> <span style=\"font-weight: 400;\">2<\/span><span style=\"font-weight: 400;\">px<\/span> <span style=\"font-weight: 400;\">dotted<\/span> <span style=\"font-weight: 400;\">#28a745<\/span><span style=\"font-weight: 400;\">; <\/span><span style=\"font-weight: 400;\">\/* T\u1ea1o vi\u1ec1n ch\u1ea5m *\/<\/span>\n<span style=\"font-weight: 400;\">\u00a0}<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0<\/span><i><span style=\"font-weight: 400;\">.custom-border-gradient<\/span><\/i><span style=\"font-weight: 400;\"> {<\/span>\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">border<\/span><span style=\"font-weight: 400;\">:<\/span> <span style=\"font-weight: 400;\">3<\/span><span style=\"font-weight: 400;\">px<\/span> <span style=\"font-weight: 400;\">solid<\/span><span style=\"font-weight: 400;\">;<\/span>\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">border-image<\/span><span style=\"font-weight: 400;\">:<\/span> <span style=\"font-weight: 400;\">linear-gradient<\/span><span style=\"font-weight: 400;\">(<\/span><span style=\"font-weight: 400;\">to<\/span> <span style=\"font-weight: 400;\">right<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">#f00<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">#00f<\/span><span style=\"font-weight: 400;\">) <\/span><span style=\"font-weight: 400;\">1<\/span><span style=\"font-weight: 400;\">; <\/span><span style=\"font-weight: 400;\">\/* t\u1ea1o m\u00e0u s\u1eafc cho vi\u1ec1n *\/<\/span>\n<span style=\"font-weight: 400;\">\u00a0}<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">V\u00e0 s\u1eed d\u1ee5ng trong HTML:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400;\">div<\/span> <i><span style=\"font-weight: 400;\">class<\/span><\/i><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">custom-border-dashed<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">&gt;dashed&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400;\">div<\/span> <i><span style=\"font-weight: 400;\">class<\/span><\/i><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">custom-border-dotted<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">&gt;dotted&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400;\">div<\/span> <i><span style=\"font-weight: 400;\">class<\/span><\/i><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">custom-border-gradient<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">&gt;gradient&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">K\u1ebft qu\u1ea3:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-86128\" src=\"\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-14-vippro.png\" alt=\"border bootstrap - itviec blog\" width=\"1228\" height=\"276\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-14-vippro.png 1228w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-14-vippro-300x67.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-14-vippro-768x173.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-14-vippro-200x45.png 200w\" sizes=\"auto, (max-width: 1228px) 100vw, 1228px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">L\u01b0u \u00fd, Kki s\u1eed d\u1ee5ng CSS t\u00f9y ch\u1ec9nh, b\u1ea1n n\u00ean \u0111\u1eb7t t\u00ean class theo chu\u1ea9n BEM ho\u1eb7c c\u00f3 ti\u1ec1n t\u1ed1 ri\u00eang \u0111\u1ec3 tr\u00e1nh xung \u0111\u1ed9t v\u1edbi Bootstrap core.<\/span><\/p>\n<h3><b>S\u1eed d\u1ee5ng Sass t\u00f9y ch\u1ec9nh n\u00e2ng cao<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Bootstrap \u0111\u01b0\u1ee3c x\u00e2y d\u1ef1ng b\u1eb1ng Sass \u2013 m\u1ed9t ti\u1ec1n x\u1eed l\u00fd CSS m\u1ea1nh m\u1ebd. N\u1ebfu b\u1ea1n \u0111ang s\u1eed d\u1ee5ng Bootstrap th\u00f4ng qua b\u1ea3n source Sass, b\u1ea1n c\u00f3 th\u1ec3 t\u1ef1 m\u1edf r\u1ed9ng th\u00eam c\u00e1c ti\u1ec7n \u00edch border trong qu\u00e1 tr\u00ecnh build. V\u00ed d\u1ee5, th\u00eam m\u1ed9t l\u1edbp border m\u1edbi v\u00e0o h\u1ec7 th\u1ed1ng utilities:<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Trong file css:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">$utilities<\/span><span style=\"font-weight: 400;\">:<\/span> <span style=\"font-weight: 400;\">map-merge<\/span><span style=\"font-weight: 400;\">(<\/span>\n<span style=\"font-weight: 400;\"> $utilities,<\/span>\n<span style=\"font-weight: 400;\"> (<\/span>\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">border-style<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">:<\/span><span style=\"font-weight: 400;\"> (<\/span>\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">property<\/span><span style=\"font-weight: 400;\">: <\/span><span style=\"font-weight: 400;\">border-style<\/span><span style=\"font-weight: 400;\">,<\/span>\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0class: <\/span><span style=\"font-weight: 400;\">border<\/span><span style=\"font-weight: 400;\">,<\/span>\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0values: <\/span><span style=\"font-weight: 400;\">dotted<\/span> <span style=\"font-weight: 400;\">dashed<\/span> <span style=\"font-weight: 400;\">solid<\/span> <span style=\"font-weight: 400;\">double<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0)<\/span>\n<span style=\"font-weight: 400;\"> )<\/span>\n<span style=\"font-weight: 400;\">);<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">S\u1eed d\u1ee5ng trong HTML:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400;\">div<\/span> <i><span style=\"font-weight: 400;\">class<\/span><\/i><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">border-dashed<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">&gt;Vi\u1ec1n dashed&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400;\">div<\/span> <i><span style=\"font-weight: 400;\">class<\/span><\/i><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">border-dotted<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">&gt;Vi\u1ec1n dotted&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">\u0110\u00e2y l\u00e0 c\u00e1ch l\u00e0m chuy\u00ean nghi\u1ec7p, gi\u00fap b\u1ea1n t\u1eadn d\u1ee5ng h\u1ec7 th\u1ed1ng utility API c\u1ee7a Bootstrap \u0111\u1ec3 m\u1edf r\u1ed9ng theo \u0111\u00fang ki\u1ebfn tr\u00fac framework, gi\u1eef cho m\u00e3 ngu\u1ed3n s\u1ea1ch v\u00e0 c\u00f3 th\u1ec3 b\u1ea3o tr\u00ec l\u00e2u d\u00e0i.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Mot_so_luu_y_khi_su_dung_dinh_dang_border_Bootstrap\"><\/span><b>M\u1ed9t s\u1ed1 l\u01b0u \u00fd khi s\u1eed d\u1ee5ng \u0111\u1ecbnh d\u1ea1ng border Bootstrap<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">\u01afu ti\u00ean d\u00f9ng class c\u00f3 s\u1eb5n tr\u01b0\u1edbc khi vi\u1ebft th\u00eam CSS t\u00f9y ch\u1ec9nh \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o t\u1ed1i \u01b0u hi\u1ec7u su\u1ea5t v\u00e0 tr\u00e1nh vi\u1ebft l\u1ea1i nh\u1eefng g\u00ec Bootstrap \u0111\u00e3 h\u1ed7 tr\u1ee3.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Ki\u1ec3m tra t\u00ednh t\u01b0\u01a1ng ph\u1ea3n gi\u1eefa m\u00e0u border v\u00e0 background \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o t\u00ednh d\u1ec5 \u0111\u1ecdc v\u00e0 kh\u1ea3 n\u0103ng truy c\u1eadp (accessibility).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">K\u1ebft h\u1ee3p border v\u00e0 spacing (padding, margin) h\u1ee3p l\u00fd \u0111\u1ec3 giao di\u1ec7n c\u1ee7a ph\u1ea7n t\u1eed HTML tr\u00f4ng \u0111\u1eb9p m\u1eaft h\u01a1n.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">\u0110\u1ec3 \u0111\u1ecbnh d\u1ea1ng m\u00e0u s\u1eafc, \u0111\u1ed9 d\u00e0y border c\u00f3 th\u1ec3 ho\u1ea1t \u0111\u1ed9ng, ph\u1ea7n t\u1eed c\u1ea7n ph\u1ea3i \u0111\u01b0\u1ee3c th\u00eam border tr\u01b0\u1edbc \u0111\u00f3 (s\u1eed d\u1ee5ng class <\/span><b>.border<\/b><span style=\"font-weight: 400;\"> ho\u1eb7c CSS t\u00f9y ch\u1ec9nh).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">S\u1eed d\u1ee5ng quy t\u1eafc \u0111\u1eb7t t\u00ean BEM cho CSS t\u00f9y ch\u1ec9nh \u0111\u1ec3 tr\u00e1nh xung \u0111\u1ed9t v\u1edbi class c\u1ee7a Bootstrap.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Trong Bootstrap 5, d\u00f9ng .border-end v\u00e0 .border-start thay v\u00ec .border-right v\u00e0 .border-left \u0111\u1ec3 h\u1ed7 tr\u1ee3 ng\u00f4n ng\u1eef t\u1eeb ph\u1ea3i sang tr\u00e1i.<\/span><\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Cau_hoi_thuong_gap_ve_border_Bootstrap\"><\/span><b>C\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 border Bootstrap<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><b>L\u00e0m sao \u0111\u1ec3 \u0111\u1ecbnh d\u1ea1ng border d\u1ea1ng vi\u1ec1n \u0111\u1ee9t \u0111o\u1ea1n trong Bootstrap?<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Bootstrap kh\u00f4ng c\u00f3 class ti\u1ec7n \u00edch s\u1eb5n cho vi\u1ec1n dashed (\u0111\u1ee9t \u0111o\u1ea1n) ho\u1eb7c dotted (ch\u1ea5m bi). Tuy nhi\u00ean b\u1ea1n c\u00f3 th\u1ec3 d\u00f9ng CSS t\u00f9y ch\u1ec9nh nh\u01b0:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">\u00a0<\/span><i><span style=\"font-weight: 400;\">.custom-border-dashed<\/span><\/i><span style=\"font-weight: 400;\"> {<\/span>\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">border<\/span><span style=\"font-weight: 400;\">:<\/span> <span style=\"font-weight: 400;\">2<\/span><span style=\"font-weight: 400;\">px<\/span> <span style=\"font-weight: 400;\">dashed<\/span> <span style=\"font-weight: 400;\">#007bff<\/span><span style=\"font-weight: 400;\">; <\/span><span style=\"font-weight: 400;\">\/* T\u1ea1o vi\u1ec1n n\u00e9t \u0111\u1ee9t *\/<\/span>\n<span style=\"font-weight: 400;\">\u00a0}<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">V\u00e0 s\u1eed d\u1ee5ng trong HTML:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400;\">div<\/span> <i><span style=\"font-weight: 400;\">class<\/span><\/i><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">custom-border-dashed<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">&gt;dashed&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/pre>\n<h3><b>Bootstrap c\u00f3 h\u1ed7 tr\u1ee3 bo g\u00f3c h\u00ecnh tr\u00f2n kh\u00f4ng?<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Bootstrap cung c\u1ea5p class .rounded-circle gi\u00fap h\u1ed7 tr\u1ee3 bo g\u00f3c tr\u00f2n ho\u00e0n to\u00e0n cho ph\u1ea7n t\u1eed, tuy nhi\u00ean b\u1ea1n c\u1ea7n l\u01b0u \u00fd \u0111\u1ecbnh d\u1ea1ng chi\u1ec1u r\u1ed9ng v\u00e0 chi\u1ec1u cao b\u1eb1ng nhau. V\u00ed d\u1ee5:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400;\">div<\/span> <i><span style=\"font-weight: 400;\">class<\/span><\/i><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">border border-success rounded-circle<\/span><span style=\"font-weight: 400;\">\"<\/span> <i><span style=\"font-weight: 400;\">style<\/span><\/i><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">width<\/span><span style=\"font-weight: 400;\">:<\/span> <span style=\"font-weight: 400;\">100<\/span><span style=\"font-weight: 400;\">px<\/span><span style=\"font-weight: 400;\">; <\/span><span style=\"font-weight: 400;\">height<\/span><span style=\"font-weight: 400;\">:<\/span> <span style=\"font-weight: 400;\">100<\/span><span style=\"font-weight: 400;\">px<\/span><span style=\"font-weight: 400;\">;<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">&gt;&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400;\">div<\/span> <i><span style=\"font-weight: 400;\">class<\/span><\/i><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">border border-primary rounded-circle<\/span><span style=\"font-weight: 400;\">\"<\/span> <i><span style=\"font-weight: 400;\">style<\/span><\/i><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">width<\/span><span style=\"font-weight: 400;\">:<\/span> <span style=\"font-weight: 400;\">200<\/span><span style=\"font-weight: 400;\">px<\/span><span style=\"font-weight: 400;\">; <\/span><span style=\"font-weight: 400;\">height<\/span><span style=\"font-weight: 400;\">:<\/span> <span style=\"font-weight: 400;\">200<\/span><span style=\"font-weight: 400;\">px<\/span><span style=\"font-weight: 400;\">;<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">&gt;&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">K\u1ebft qu\u1ea3:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-86127\" src=\"\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-15-vippro.jpg\" alt=\"border bootstrap - itviec blog\" width=\"932\" height=\"506\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-15-vippro.jpg 932w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-15-vippro-300x163.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-15-vippro-768x417.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-15-vippro-200x109.jpg 200w\" sizes=\"auto, (max-width: 932px) 100vw, 932px\" \/><\/p>\n<h3><b>L\u00e0m sao \u0111\u1ec3 lo\u1ea1i b\u1ecf border top nh\u01b0ng v\u1eabn gi\u1eef l\u1ea1i c\u00e1c c\u1ea1nh kh\u00e1c trong Bootstrap?<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">M\u1ed9t c\u00e1ch nhanh ch\u00f3ng \u0111\u1ec3 b\u1ea1n c\u00f3 th\u1ec3 lo\u1ea1i b\u1ecf \u0111\u01b0\u1eddng vi\u1ec1n ph\u00eda tr\u00ean nh\u01b0ng v\u1eabn gi\u1eef c\u00e1c \u0111\u01b0\u1eddng vi\u1ec1n kh\u00e1c \u0111\u00f3 l\u00e0 s\u1eed d\u1ee5ng k\u1ebft h\u1ee3p gi\u1eefa class .border (th\u00eam border xung quanh) v\u00e0 .border-top-0 (x\u00f3a border top):<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0&lt;<\/span><span style=\"font-weight: 400;\">div<\/span> <i><span style=\"font-weight: 400;\">class<\/span><\/i><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">border border-top-0<\/span><span style=\"font-weight: 400;\">\"<\/span><span style=\"font-weight: 400;\">&gt;&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">K\u1ebft qu\u1ea3:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-86126\" src=\"\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-16-vippro.jpg\" alt=\"border bootstrap - itviec blog\" width=\"466\" height=\"500\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-16-vippro.jpg 466w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-16-vippro-280x300.jpg 280w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-16-vippro-186x200.jpg 186w\" sizes=\"auto, (max-width: 466px) 100vw, 466px\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Tong_ket\"><\/span><b>T\u1ed5ng k\u1ebft<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">C\u00e1c ti\u1ec7n \u00edch border c\u1ee7a Bootstrap l\u00e0 c\u00f4ng c\u1ee5 tuy\u1ec7t v\u1eddi cho l\u1eadp tr\u00ecnh vi\u00ean v\u00e0 nh\u00e0 thi\u1ebft k\u1ebf mu\u1ed1n t\u1ea1o b\u1ed1 c\u1ee5c s\u1ea1ch s\u1ebd, nh\u1ea5t qu\u00e1n v\u00e0 responsive. Border trong Bootstrap kh\u00f4ng ch\u1ec9 gi\u00fap ph\u00e2n t\u00e1ch n\u1ed9i dung r\u00f5 r\u00e0ng h\u01a1n m\u00e0 c\u00f2n n\u00e2ng cao t\u00ednh th\u1ea9m m\u1ef9 cho giao di\u1ec7n n\u1ebfu \u0111\u01b0\u1ee3c k\u1ebft h\u1ee3p h\u1ee3p l\u00fd v\u1edbi m\u00e0u s\u1eafc, b\u00f3ng \u0111\u1ed5 v\u00e0 bo g\u00f3c.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Qua b\u00e0i vi\u1ebft n\u00e0y, ITviec hi v\u1ecdng \u0111\u00e3 cung c\u1ea5p cho b\u1ea1n \u0111\u1ecdc nh\u1eefng th\u00f4ng tin b\u1ed5 \u00edch v\u1ec1 vi\u1ec7c s\u1eed d\u1ee5ng \u0111\u1ecbnh d\u1ea1ng border trong Bootstrap \u0111\u1ec3 t\u1eeb \u0111\u00f3 b\u1ea1n c\u00f3 th\u1ec3 \u00e1p d\u1ee5ng v\u00e0o d\u1ef1 \u00e1n c\u1ee7a m\u00ecnh \u0111\u01b0\u1ee3c d\u1ec5 d\u00e0ng h\u01a1n.<\/span><\/p>\n<blockquote><p><em>\u0110\u1ecdc th\u00eam: <a href=\"\/blog\/text-bootstrap-la-gi\/\" target=\"_blank\" rel=\"noopener\"><strong>Text Bootstrap: 10+ c\u00e1ch \u0111\u1ecbnh d\u1ea1ng v\u0103n b\u1ea3n hi\u1ec7u qu\u1ea3 v\u1edbi Bootstrap<\/strong><\/a><\/em><\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>Bootstrap l\u00e0 m\u1ed9t framework CSS m\u1ea1nh m\u1ebd gi\u00fap vi\u1ec7c thi\u1ebft k\u1ebf giao di\u1ec7n web tr\u1edf n\u00ean d\u1ec5 d\u00e0ng h\u01a1n bao gi\u1edd h\u1ebft. Trong \u0111\u00f3, c\u00e1c ti\u1ec7n \u00edch \u0111\u1ecbnh d\u1ea1ng \u0111\u01b0\u1eddng vi\u1ec1n (border utilities) \u0111\u00f3ng vai tr\u00f2 quan tr\u1ecdng trong vi\u1ec7c l\u00e0m n\u1ed5i b\u1eadt v\u00e0 ph\u00e2n t\u00e1ch c\u00e1c th\u00e0nh ph\u1ea7n trong giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng. T\u00ecm [&hellip;]<\/p>\n","protected":false},"author":218,"featured_media":86124,"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-86055","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.8) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Border Bootstrap l\u00e0 g\u00ec? 10+ c\u00e1ch thi\u1ebft k\u1ebf vi\u1ec1n \u0111\u1eb9p v\u1edbi Bootstrap - ITviec Blog<\/title>\n<meta name=\"description\" content=\"Border Bootstrap \u0111\u1ecbnh d\u1ea1ng \u0111\u01b0\u1eddng vi\u1ec1n c\u1ee7a c\u00e1c th\u00e0nh ph\u1ea7n HTML \u0111\u1eb9p m\u1eaft v\u00e0 chuy\u00ean nghi\u1ec7p. Chi ti\u1ebft c\u00e1ch s\u1eed d\u1ee5ng l\u1edbp border trong Bootstrap!\" \/>\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-bootstrap-la-gi\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Border Bootstrap l\u00e0 g\u00ec? 10+ c\u00e1ch thi\u1ebft k\u1ebf vi\u1ec1n \u0111\u1eb9p v\u1edbi Bootstrap\" \/>\n<meta property=\"og:description\" content=\"Bootstrap l\u00e0 m\u1ed9t framework CSS m\u1ea1nh m\u1ebd gi\u00fap vi\u1ec7c thi\u1ebft k\u1ebf giao di\u1ec7n web tr\u1edf n\u00ean d\u1ec5 d\u00e0ng h\u01a1n bao gi\u1edd h\u1ebft. Trong \u0111\u00f3, c\u00e1c ti\u1ec7n \u00edch \u0111\u1ecbnh d\u1ea1ng \u0111\u01b0\u1eddng vi\u1ec1n\" \/>\n<meta property=\"og:url\" content=\"https:\/\/itviec.com\/blog\/border-bootstrap-la-gi\/\" \/>\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=\"2025-04-19T13:21:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-17T07:54:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-vippro-scaled.png\" \/>\n\t<meta property=\"og:image:width\" content=\"640\" \/>\n\t<meta property=\"og:image:height\" content=\"337\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ph\u1ea1m H\u1eefu Ng\u1ecdc\" \/>\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=\"Ph\u1ea1m H\u1eefu Ng\u1ecdc\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 ph\u00fat\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Border Bootstrap l\u00e0 g\u00ec? 10+ c\u00e1ch thi\u1ebft k\u1ebf vi\u1ec1n \u0111\u1eb9p v\u1edbi Bootstrap - ITviec Blog","description":"Border Bootstrap \u0111\u1ecbnh d\u1ea1ng \u0111\u01b0\u1eddng vi\u1ec1n c\u1ee7a c\u00e1c th\u00e0nh ph\u1ea7n HTML \u0111\u1eb9p m\u1eaft v\u00e0 chuy\u00ean nghi\u1ec7p. Chi ti\u1ebft c\u00e1ch s\u1eed d\u1ee5ng l\u1edbp border trong Bootstrap!","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-bootstrap-la-gi\/","og_locale":"vi_VN","og_type":"article","og_title":"Border Bootstrap l\u00e0 g\u00ec? 10+ c\u00e1ch thi\u1ebft k\u1ebf vi\u1ec1n \u0111\u1eb9p v\u1edbi Bootstrap","og_description":"Bootstrap l\u00e0 m\u1ed9t framework CSS m\u1ea1nh m\u1ebd gi\u00fap vi\u1ec7c thi\u1ebft k\u1ebf giao di\u1ec7n web tr\u1edf n\u00ean d\u1ec5 d\u00e0ng h\u01a1n bao gi\u1edd h\u1ebft. Trong \u0111\u00f3, c\u00e1c ti\u1ec7n \u00edch \u0111\u1ecbnh d\u1ea1ng \u0111\u01b0\u1eddng vi\u1ec1n","og_url":"https:\/\/itviec.com\/blog\/border-bootstrap-la-gi\/","og_site_name":"ITviec Blog","article_publisher":"https:\/\/www.facebook.com\/ITviec","article_published_time":"2025-04-19T13:21:32+00:00","article_modified_time":"2025-06-17T07:54:28+00:00","og_image":[{"width":640,"height":337,"url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-vippro-scaled.png","type":"image\/png"}],"author":"Ph\u1ea1m H\u1eefu Ng\u1ecdc","twitter_card":"summary_large_image","twitter_creator":"@ITviec","twitter_site":"@ITviec","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"Ph\u1ea1m H\u1eefu Ng\u1ecdc","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"13 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/itviec.com\/blog\/border-bootstrap-la-gi\/#article","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/border-bootstrap-la-gi\/"},"author":{"name":"Ph\u1ea1m H\u1eefu Ng\u1ecdc","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/b610b2614c1ef58f6bfccfe68242733c"},"headline":"Border Bootstrap l\u00e0 g\u00ec? 10+ c\u00e1ch thi\u1ebft k\u1ebf vi\u1ec1n \u0111\u1eb9p v\u1edbi Bootstrap","datePublished":"2025-04-19T13:21:32+00:00","dateModified":"2025-06-17T07:54:28+00:00","mainEntityOfPage":{"@id":"https:\/\/itviec.com\/blog\/border-bootstrap-la-gi\/"},"wordCount":2514,"publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"image":{"@id":"https:\/\/itviec.com\/blog\/border-bootstrap-la-gi\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-vippro-scaled.png","articleSection":["Chuy\u00ean m\u00f4n IT"],"inLanguage":"vi"},{"@type":"WebPage","@id":"https:\/\/itviec.com\/blog\/border-bootstrap-la-gi\/","url":"https:\/\/itviec.com\/blog\/border-bootstrap-la-gi\/","name":"Border Bootstrap l\u00e0 g\u00ec? 10+ c\u00e1ch thi\u1ebft k\u1ebf vi\u1ec1n \u0111\u1eb9p v\u1edbi Bootstrap - ITviec Blog","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/itviec.com\/blog\/border-bootstrap-la-gi\/#primaryimage"},"image":{"@id":"https:\/\/itviec.com\/blog\/border-bootstrap-la-gi\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-vippro-scaled.png","datePublished":"2025-04-19T13:21:32+00:00","dateModified":"2025-06-17T07:54:28+00:00","description":"Border Bootstrap \u0111\u1ecbnh d\u1ea1ng \u0111\u01b0\u1eddng vi\u1ec1n c\u1ee7a c\u00e1c th\u00e0nh ph\u1ea7n HTML \u0111\u1eb9p m\u1eaft v\u00e0 chuy\u00ean nghi\u1ec7p. Chi ti\u1ebft c\u00e1ch s\u1eed d\u1ee5ng l\u1edbp border trong Bootstrap!","breadcrumb":{"@id":"https:\/\/itviec.com\/blog\/border-bootstrap-la-gi\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/itviec.com\/blog\/border-bootstrap-la-gi\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/border-bootstrap-la-gi\/#primaryimage","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-vippro-scaled.png","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/border-bootstrap-vippro-scaled.png","width":640,"height":337,"caption":"border bootstrap - itviec blog"},{"@type":"BreadcrumbList","@id":"https:\/\/itviec.com\/blog\/border-bootstrap-la-gi\/#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 Bootstrap l\u00e0 g\u00ec? 10+ c\u00e1ch thi\u1ebft k\u1ebf vi\u1ec1n \u0111\u1eb9p v\u1edbi Bootstrap"}]},{"@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\/b610b2614c1ef58f6bfccfe68242733c","name":"Ph\u1ea1m H\u1eefu Ng\u1ecdc","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/Pham-Huu-Ngoc-technical-content-reviewer-e1712135841473-100x100.jpg","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/Pham-Huu-Ngoc-technical-content-reviewer-e1712135841473-100x100.jpg","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/Pham-Huu-Ngoc-technical-content-reviewer-e1712135841473-100x100.jpg","caption":"Ph\u1ea1m H\u1eefu Ng\u1ecdc"},"url":"https:\/\/itviec.com\/blog\/author\/pham-huu-ngoc\/"}]}},"_links":{"self":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/86055","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\/218"}],"replies":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/comments?post=86055"}],"version-history":[{"count":2,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/86055\/revisions"}],"predecessor-version":[{"id":88189,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/86055\/revisions\/88189"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media\/86124"}],"wp:attachment":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media?parent=86055"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/categories?post=86055"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/tags?post=86055"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}