Add border property to a span element
I have a span element (a star rating created by a Angular-UI Rating (link to Plunkr at the bottom). I want to apply a border to the entire span (rating) element so that I can alert the user when there is a form submit without rating. (similar to has-error class for form validation). I’m planning to do this by applying a red border to the span element. How can I accomplish this? Plunker: https://plnkr.co/edit/m0H2DZwwwtS2deMB75ON?p=preview
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']); angular.module('ui.bootstrap.demo').controller('RatingDemoCtrl', function ($scope) < $scope.rate = 7; $scope.max = 10; $scope.isReadonly = false; $scope.hoveringOver = function(value) < $scope.overStar = value; $scope.percent = 100 * (value / $scope.max); >; $scope.ratingStates = [ , , , , ]; >);5 Answers 5
Make the span as inline-block element and apply border to it
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']); angular.module('ui.bootstrap.demo').controller('RatingDemoCtrl', function($scope) < $scope.rate = 7; $scope.max = 10; $scope.isReadonly = false; $scope.hoveringOver = function(value) < $scope.overStar = value; $scope.percent = 100 * (value / $scope.max); >; $scope.ratingStates = [< stateOn: 'glyphicon-ok-sign', stateOff: 'glyphicon-ok-circle' >, < stateOn: 'glyphicon-star', stateOff: 'glyphicon-star-empty' >, < stateOn: 'glyphicon-heart', stateOff: 'glyphicon-ban-circle' >, < stateOn: 'glyphicon-heart' >, < stateOff: 'glyphicon-off' >]; >);Borders
Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.
Border
Use border utilities to add or remove an element’s borders. Choose from all borders or one at a time.
Additive
Add borders to custom elements:
span class="border">span> span class="border-top">span> span class="border-end">span> span class="border-bottom">span> span class="border-start">span>Subtractive
span class="border border-0">span> span class="border border-top-0">span> span class="border border-end-0">span> span class="border border-bottom-0">span> span class="border border-start-0">span>Color
Change the border color using utilities built on our theme colors.
span class="border border-primary">span> span class="border border-secondary">span> span class="border border-success">span> span class="border border-danger">span> span class="border border-warning">span> span class="border border-info">span> span class="border border-light">span> span class="border border-dark">span> span class="border border-white">span>Or modify the default border-color of a component:
div class="mb-4"> label for="exampleFormControlInput1" class="form-label">Email addresslabel> input type="email" class="form-control border-success" id="exampleFormControlInput1" placeholder="name@example.com"> div> div class="h4 pb-2 mb-4 text-danger border-bottom border-danger"> Dangerous heading div> div class="p-3 bg-info bg-opacity-10 border border-info border-start-0 rounded-end"> Changing border color and width div>Opacity
Bootstrap border- utilities are generated with Sass using CSS variables. This allows for real-time color changes without compilation and dynamic alpha transparency changes.
How it works
Consider our default .border-success utility.
.border-success --bs-border-opacity: 1; border-color: rgba(var(--bs-success-rgb), var(--bs-border-opacity)) !important; > We use an RGB version of our —bs-success (with the value of 25, 135, 84 ) CSS variable and attached a second CSS variable, —bs-border-opacity , for the alpha transparency (with a default value 1 thanks to a local CSS variable). That means anytime you use .border-success now, your computed color value is rgba(25, 135, 84, 1) . The local CSS variable inside each .border-* class avoids inheritance issues so nested instances of the utilities don’t automatically have a modified alpha transparency.
Example
To change that opacity, override —bs-border-opacity via custom styles or inline styles.
div class="border border-success p-2 mb-2">This is default success borderdiv> div class="border border-success p-2" style="--bs-border-opacity: .5;">This is 50% opacity success borderdiv>Or, choose from any of the .border-opacity utilities:
div class="border border-success p-2 mb-2">This is default success borderdiv> div class="border border-success p-2 mb-2 border-opacity-75">This is 75% opacity success borderdiv> div class="border border-success p-2 mb-2 border-opacity-50">This is 50% opacity success borderdiv> div class="border border-success p-2 mb-2 border-opacity-25">This is 25% opacity success borderdiv> div class="border border-success p-2 border-opacity-10">This is 10% opacity success borderdiv>Width
span class="border border-1">span> span class="border border-2">span> span class="border border-3">span> span class="border border-4">span> span class="border border-5">span>Radius
Add classes to an element to easily round its corners.
Example top rounded image
Example right rounded image
Example bottom rounded image
Example left rounded image
img src=". " class="rounded" alt=". "> img src=". " class="rounded-top" alt=". "> img src=". " class="rounded-end" alt=". "> img src=". " class="rounded-bottom" alt=". "> img src=". " class="rounded-start" alt=". "> img src=". " class="rounded-circle" alt=". "> img src=". " class="rounded-pill" alt=". ">Sizes
Use the scaling classes for larger or smaller rounded corners. Sizes range from 0 to 5 , and can be configured by modifying the utilities API.
Example small rounded image
Example default rounded image
Example large rounded image
Example larger rounded image
Example extra large rounded image
img src=". " class="rounded-0" alt=". "> img src=". " class="rounded-1" alt=". "> img src=". " class="rounded-2" alt=". "> img src=". " class="rounded-3" alt=". "> img src=". " class="rounded-4" alt=". "> img src=". " class="rounded-5" alt=". ">CSS
Variables
--#border-width: #$border-width>; --#border-style: #$border-style>; --#border-color: #$border-color>; --#border-color-translucent: #$border-color-translucent>; --#border-radius: #$border-radius>; --#border-radius-sm: #$border-radius-sm>; --#border-radius-lg: #$border-radius-lg>; --#border-radius-xl: #$border-radius-xl>; --#border-radius-2xl: #$border-radius-2xl>; --#border-radius-pill: #$border-radius-pill>; Sass variables
$border-width: 1px; $border-widths: ( 1: 1px, 2: 2px, 3: 3px, 4: 4px, 5: 5px ); $border-style: solid; $border-color: $gray-300; $border-color-translucent: rgba($black, .175); $border-radius: .375rem; $border-radius-sm: .25rem; $border-radius-lg: .5rem; $border-radius-xl: 1rem; $border-radius-2xl: 2rem; $border-radius-pill: 50rem; Sass mixins
@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) @if $enable-rounded border-radius: valid-radius($radius); > @else if $fallback-border-radius != false border-radius: $fallback-border-radius; > > @mixin border-top-radius($radius: $border-radius) @if $enable-rounded border-top-left-radius: valid-radius($radius); border-top-right-radius: valid-radius($radius); > > @mixin border-end-radius($radius: $border-radius) @if $enable-rounded border-top-right-radius: valid-radius($radius); border-bottom-right-radius: valid-radius($radius); > > @mixin border-bottom-radius($radius: $border-radius) @if $enable-rounded border-bottom-right-radius: valid-radius($radius); border-bottom-left-radius: valid-radius($radius); > > @mixin border-start-radius($radius: $border-radius) @if $enable-rounded border-top-left-radius: valid-radius($radius); border-bottom-left-radius: valid-radius($radius); > > @mixin border-top-start-radius($radius: $border-radius) @if $enable-rounded border-top-left-radius: valid-radius($radius); > > @mixin border-top-end-radius($radius: $border-radius) @if $enable-rounded border-top-right-radius: valid-radius($radius); > > @mixin border-bottom-end-radius($radius: $border-radius) @if $enable-rounded border-bottom-right-radius: valid-radius($radius); > > @mixin border-bottom-start-radius($radius: $border-radius) @if $enable-rounded border-bottom-left-radius: valid-radius($radius); > > Utilities API
Border utilities are declared in our utilities API in scss/_utilities.scss . Learn how to use the utilities API.
"border": ( property: border, values: ( null: var(--#$prefix>border-width) var(--#$prefix>border-style) var(--#$prefix>border-color), 0: 0, ) ), "border-top": ( property: border-top, values: ( null: var(--#$prefix>border-width) var(--#$prefix>border-style) var(--#$prefix>border-color), 0: 0, ) ), "border-end": ( property: border-right, class: border-end, values: ( null: var(--#$prefix>border-width) var(--#$prefix>border-style) var(--#$prefix>border-color), 0: 0, ) ), "border-bottom": ( property: border-bottom, values: ( null: var(--#$prefix>border-width) var(--#$prefix>border-style) var(--#$prefix>border-color), 0: 0, ) ), "border-start": ( property: border-left, class: border-start, values: ( null: var(--#$prefix>border-width) var(--#$prefix>border-style) var(--#$prefix>border-color), 0: 0, ) ), "border-color": ( property: border-color, class: border, local-vars: ( "border-opacity": 1 ), values: $utilities-border-colors ), "border-width": ( css-var: true, css-variable-name: border-width, class: border, values: $border-widths ), "border-opacity": ( css-var: true, class: border-opacity, values: ( 10: .1, 25: .25, 50: .5, 75: .75, 100: 1 ) ), "rounded": ( property: border-radius, class: rounded, values: ( null: var(--#$prefix>border-radius), 0: 0, 1: var(--#$prefix>border-radius-sm), 2: var(--#$prefix>border-radius), 3: var(--#$prefix>border-radius-lg), 4: var(--#$prefix>border-radius-xl), 5: var(--#$prefix>border-radius-2xl), circle: 50%, pill: var(--#$prefix>border-radius-pill) ) ), "rounded-top": ( property: border-top-left-radius border-top-right-radius, class: rounded-top, values: (null: var(--#$prefix>border-radius)) ), "rounded-end": ( property: border-top-right-radius border-bottom-right-radius, class: rounded-end, values: (null: var(--#$prefix>border-radius)) ), "rounded-bottom": ( property: border-bottom-right-radius border-bottom-left-radius, class: rounded-bottom, values: (null: var(--#$prefix>border-radius)) ), "rounded-start": ( property: border-bottom-left-radius border-top-left-radius, class: rounded-start, values: (null: var(--#$prefix>border-radius)) ), - Designed and built with all the love in the world by the Bootstrap team with the help of our contributors.
- Code licensed MIT, docs CC BY 3.0.
- Currently v5.2.3.
бордер по ширине текста
Есть блок в котором есть текст, если слова перенеслись на новую строку, блок стал меньше, нужно чтоб снизу был бордер по ширине текста 
inline-block не подходит так как если слова перенеслись то блок будит считаться по всей ширине и бордер растянется. Так же пробовал внутри вставлять и ему делать бордер но тогда каждая строка будит с бордером. 
Не могу сообразить как сделать чтобы бордер был как на 1 картинке?
4 ответа 4
Оказалось можно, для inline элементов псевдоселектор принимает ширину последнего.
h2 < font: 28px/30px Arial; text-transform: uppercase; max-width: 20px; display: inline; position: relative; >h2:before < content: ''; display: block; position: absolute; width: 100%; bottom: 0; border-bottom: 1px solid green; >div < padding: 20px; >.test1 < max-width: 50%; >.test2 < max-width: 60%; >.test3
Расширенная гарантия Tyres
Расширенная Tyres гарантия
Tyres гарантия Расширенная
Не проверял во всех браузерах, но в хроме все отлично
значит я не так понял, думал надо красиво) так по самой длинной строке то вообще не проблема. inline-block и бордер
а через inline-block тоже не то, если текст внутри перенесся, то блок как бы считается на 100%, уже все варианты перепробовал, по ходу ни как)))
так все равно если текст перенесся то он как 100% считается, то же что и с инлайн блоком, вся трабла из-за текста, в общем я уже понял что решения нету увы, сделал просто через before и дал ширину в процентах, а дизайнеру дал по шапке ))))
Могу предложить такой вариант:
Расширенная гарантия Tyresесли нужно тупо для одного слова подчеркивание, то тогда так:
Hello world hello world hello это не совсем то что нужно, так как блок не статичный, а адаптивный, бордер должен подстраиваться под текст, если текст перенесся на следующую строку то блок стал меньше, грубо говоря не блок а span
блок section для примера был вставлен.Если section сделать адаптивным — бордер будет все равно на всю его ширину и будет той длинны какой длинны текст.
Вы хоть когда пример пишите вникните в то, что требуется. Загаловок может состоять из разного количества слов, когда слов много и они не влазят то пишутся с новой строки и как бы визуально блок становится меньше, а по факту он растягивается на всю ширину. И бордер нужно сделать относительно ширины текста. В вашем коде вы взяли и разбили текст на 2 разных слова. Как вы себе это представляете реализовать если конечного текста вы не знаете.