How to create CSS border corners around text [duplicate]
1
This question already has an answer here:
CSS - show only corner border
15 answers
I can't seem to figure out how to put corner borders around responsive text.
Screenshot of what I'm trying to achieve using green corners:
Here is the domain of where the text resides.
div {
position: relative;
width: 380px;
height: 0px;
margin: 6px;
}
div:after {
display: block;
content: "";
width: 75px;
height: 75px;
position: absolute;
top: -5px;
right: -5px;
border-top: 4px solid green;
border-right: 4px solid green;
}
a p:before {
display: block;
content: "";
width: 75px;
height: 75px;
position: absolute;
bottom: -70px;
left: -6px;
border-bottom: 4px solid green;
border-left: 4px solid green;
}
html css css3
edited Nov 13 '18 at 14:48
Stephen Kennedy
7,179134967
asked Nov 13 '18 at 12:59
user68914user68914
83
marked as duplicate by Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 13 '18 at 13:40
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
1
This question already has an answer here:
CSS - show only corner border
15 answers
I can't seem to figure out how to put corner borders around responsive text.
Screenshot of what I'm trying to achieve using green corners:
Here is the domain of where the text resides.
div {
position: relative;
width: 380px;
height: 0px;
margin: 6px;
}
div:after {
display: block;
content: "";
width: 75px;
height: 75px;
position: absolute;
top: -5px;
right: -5px;
border-top: 4px solid green;
border-right: 4px solid green;
}
a p:before {
display: block;
content: "";
width: 75px;
height: 75px;
position: absolute;
bottom: -70px;
left: -6px;
border-bottom: 4px solid green;
border-left: 4px solid green;
}
html css css3
edited Nov 13 '18 at 14:48
Stephen Kennedy
7,179134967
asked Nov 13 '18 at 12:59
user68914user68914
83
marked as duplicate by Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 13 '18 at 13:40
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
1
1
1
This question already has an answer here:
CSS - show only corner border
15 answers
I can't seem to figure out how to put corner borders around responsive text.
Screenshot of what I'm trying to achieve using green corners:
Here is the domain of where the text resides.
div {
position: relative;
width: 380px;
height: 0px;
margin: 6px;
}
div:after {
display: block;
content: "";
width: 75px;
height: 75px;
position: absolute;
top: -5px;
right: -5px;
border-top: 4px solid green;
border-right: 4px solid green;
}
a p:before {
display: block;
content: "";
width: 75px;
height: 75px;
position: absolute;
bottom: -70px;
left: -6px;
border-bottom: 4px solid green;
border-left: 4px solid green;
}
html css css3
edited Nov 13 '18 at 14:48
Stephen Kennedy
7,179134967
asked Nov 13 '18 at 12:59
user68914user68914
83
This question already has an answer here:
CSS - show only corner border
15 answers
I can't seem to figure out how to put corner borders around responsive text.
Screenshot of what I'm trying to achieve using green corners:
Here is the domain of where the text resides.
div {
position: relative;
width: 380px;
height: 0px;
margin: 6px;
}
div:after {
display: block;
content: "";
width: 75px;
height: 75px;
position: absolute;
top: -5px;
right: -5px;
border-top: 4px solid green;
border-right: 4px solid green;
}
a p:before {
display: block;
content: "";
width: 75px;
height: 75px;
position: absolute;
bottom: -70px;
left: -6px;
border-bottom: 4px solid green;
border-left: 4px solid green;
}
This question already has an answer here:
CSS - show only corner border
15 answers
html css css3
html css css3
edited Nov 13 '18 at 14:48
Stephen Kennedy
7,179134967
asked Nov 13 '18 at 12:59
user68914user68914
83
edited Nov 13 '18 at 14:48
Stephen Kennedy
7,179134967
asked Nov 13 '18 at 12:59
user68914user68914
83
edited Nov 13 '18 at 14:48
Stephen Kennedy
7,179134967
edited Nov 13 '18 at 14:48
Stephen Kennedy
7,179134967
edited Nov 13 '18 at 14:48
Stephen Kennedy
7,179134967
7,179134967
asked Nov 13 '18 at 12:59
user68914user68914
83
asked Nov 13 '18 at 12:59
user68914user68914
83
asked Nov 13 '18 at 12:59
user68914user68914
83
83
marked as duplicate by Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 13 '18 at 13:40
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
marked as duplicate by Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 13 '18 at 13:40
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
2
h1 {
display: inline-block;
position: relative;
padding: 10px;
}
h1:before,
h1:after {
height: 14px;
width: 14px;
position: absolute;
content: '';
}
h1:before {
right: 0;
top: 0;
border-right: 3px solid #9b59b6;
border-top: 3px solid #9b59b6;
}
h1:after {
left: 0;
bottom: 0;
border-left: 3px solid black;
border-bottom: 3px solid black;
}<h1>TEXT</h1>Absolute positioning and height & width of before and after are the key.
answered Nov 13 '18 at 13:24
Smollet777Smollet777
1,3551015
You rock! Wow, thank you so very much. :)
– user68914
Nov 14 '18 at 15:43
add a comment |
-1
Change a p:before to div:before and that should get you on the right path.
answered Nov 13 '18 at 13:03
bentedderbentedder
464317
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
h1 {
display: inline-block;
position: relative;
padding: 10px;
}
h1:before,
h1:after {
height: 14px;
width: 14px;
position: absolute;
content: '';
}
h1:before {
right: 0;
top: 0;
border-right: 3px solid #9b59b6;
border-top: 3px solid #9b59b6;
}
h1:after {
left: 0;
bottom: 0;
border-left: 3px solid black;
border-bottom: 3px solid black;
}<h1>TEXT</h1>Absolute positioning and height & width of before and after are the key.
answered Nov 13 '18 at 13:24
Smollet777Smollet777
1,3551015
You rock! Wow, thank you so very much. :)
– user68914
Nov 14 '18 at 15:43
add a comment |
2
h1 {
display: inline-block;
position: relative;
padding: 10px;
}
h1:before,
h1:after {
height: 14px;
width: 14px;
position: absolute;
content: '';
}
h1:before {
right: 0;
top: 0;
border-right: 3px solid #9b59b6;
border-top: 3px solid #9b59b6;
}
h1:after {
left: 0;
bottom: 0;
border-left: 3px solid black;
border-bottom: 3px solid black;
}<h1>TEXT</h1>Absolute positioning and height & width of before and after are the key.
answered Nov 13 '18 at 13:24
Smollet777Smollet777
1,3551015
You rock! Wow, thank you so very much. :)
– user68914
Nov 14 '18 at 15:43
add a comment |
2
2
2
h1 {
display: inline-block;
position: relative;
padding: 10px;
}
h1:before,
h1:after {
height: 14px;
width: 14px;
position: absolute;
content: '';
}
h1:before {
right: 0;
top: 0;
border-right: 3px solid #9b59b6;
border-top: 3px solid #9b59b6;
}
h1:after {
left: 0;
bottom: 0;
border-left: 3px solid black;
border-bottom: 3px solid black;
}<h1>TEXT</h1>Absolute positioning and height & width of before and after are the key.
answered Nov 13 '18 at 13:24
Smollet777Smollet777
1,3551015
h1 {
display: inline-block;
position: relative;
padding: 10px;
}
h1:before,
h1:after {
height: 14px;
width: 14px;
position: absolute;
content: '';
}
h1:before {
right: 0;
top: 0;
border-right: 3px solid #9b59b6;
border-top: 3px solid #9b59b6;
}
h1:after {
left: 0;
bottom: 0;
border-left: 3px solid black;
border-bottom: 3px solid black;
}<h1>TEXT</h1>Absolute positioning and height & width of before and after are the key.
h1 {
display: inline-block;
position: relative;
padding: 10px;
}
h1:before,
h1:after {
height: 14px;
width: 14px;
position: absolute;
content: '';
}
h1:before {
right: 0;
top: 0;
border-right: 3px solid #9b59b6;
border-top: 3px solid #9b59b6;
}
h1:after {
left: 0;
bottom: 0;
border-left: 3px solid black;
border-bottom: 3px solid black;
}<h1>TEXT</h1>h1 {
display: inline-block;
position: relative;
padding: 10px;
}
h1:before,
h1:after {
height: 14px;
width: 14px;
position: absolute;
content: '';
}
h1:before {
right: 0;
top: 0;
border-right: 3px solid #9b59b6;
border-top: 3px solid #9b59b6;
}
h1:after {
left: 0;
bottom: 0;
border-left: 3px solid black;
border-bottom: 3px solid black;
}<h1>TEXT</h1>answered Nov 13 '18 at 13:24
Smollet777Smollet777
1,3551015
answered Nov 13 '18 at 13:24
Smollet777Smollet777
1,3551015
answered Nov 13 '18 at 13:24
Smollet777Smollet777
1,3551015
answered Nov 13 '18 at 13:24
Smollet777Smollet777
1,3551015
1,3551015
You rock! Wow, thank you so very much. :)
– user68914
Nov 14 '18 at 15:43
add a comment |
You rock! Wow, thank you so very much. :)
– user68914
Nov 14 '18 at 15:43
You rock! Wow, thank you so very much. :)
– user68914
Nov 14 '18 at 15:43
You rock! Wow, thank you so very much. :)
– user68914
Nov 14 '18 at 15:43
add a comment |
-1
Change a p:before to div:before and that should get you on the right path.
answered Nov 13 '18 at 13:03
bentedderbentedder
464317
add a comment |
-1
Change a p:before to div:before and that should get you on the right path.
answered Nov 13 '18 at 13:03
bentedderbentedder
464317
add a comment |
-1
-1
-1
Change a p:before to div:before and that should get you on the right path.
answered Nov 13 '18 at 13:03
bentedderbentedder
464317
Change a p:before to div:before and that should get you on the right path.
answered Nov 13 '18 at 13:03
bentedderbentedder
464317
answered Nov 13 '18 at 13:03
bentedderbentedder
464317
answered Nov 13 '18 at 13:03
bentedderbentedder
464317
answered Nov 13 '18 at 13:03
bentedderbentedder
464317
464317
add a comment |
add a comment |
