How to create CSS border corners around text [duplicate]

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;

edited Nov 13 '18 at 14:48

Stephen Kennedy

7,304135068

asked Nov 13 '18 at 12:59

user68914

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 |

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;

edited Nov 13 '18 at 14:48

Stephen Kennedy

7,304135068

asked Nov 13 '18 at 12:59

user68914

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 |

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;

edited Nov 13 '18 at 14:48

Stephen Kennedy

7,304135068

asked Nov 13 '18 at 12:59

user68914

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

edited Nov 13 '18 at 14:48

Stephen Kennedy

7,304135068

asked Nov 13 '18 at 12:59

user68914

edited Nov 13 '18 at 14:48

Stephen Kennedy

7,304135068

asked Nov 13 '18 at 12:59

user68914

edited Nov 13 '18 at 14:48

Stephen Kennedy

7,304135068

edited Nov 13 '18 at 14:48

Stephen Kennedy

7,304135068

edited Nov 13 '18 at 14:48

Stephen Kennedy

7,304135068

asked Nov 13 '18 at 12:59

user68914

asked Nov 13 '18 at 12:59

user68914

asked Nov 13 '18 at 12:59

user68914

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 |

2 Answers
2

active

oldest

votes

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

Smollet777

1,36011015

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

bentedder

470417

add a comment |

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

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

Smollet777

1,36011015

You rock! Wow, thank you so very much. :)

– user68914
Nov 14 '18 at 15:43

add a comment |

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

Smollet777

1,36011015

You rock! Wow, thank you so very much. :)

– user68914
Nov 14 '18 at 15:43

add a comment |

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

Smollet777

1,36011015

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

Smollet777

1,36011015

answered Nov 13 '18 at 13:24

Smollet777

1,36011015

answered Nov 13 '18 at 13:24

Smollet777

1,36011015

answered Nov 13 '18 at 13:24

Smollet777

1,36011015

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

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

bentedder

470417

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

bentedder

470417

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

bentedder

470417

Change a p:before to div:before and that should get you on the right path.

answered Nov 13 '18 at 13:03

bentedder

470417

answered Nov 13 '18 at 13:03

bentedder

470417

answered Nov 13 '18 at 13:03

bentedder

470417

answered Nov 13 '18 at 13:03

bentedder

470417

add a comment |

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Pfthb