Css font with black border

How to Set Font Border in CSS?

CSS borders are very common in use and you might definitely have heard about them even if you are new to CSS. But as you might already know, we can set these borders only around the element, not around the font.

So, how can you set the border only around the fonts?

Both methods are quite easy to use. Let’s discuss each one in detail.

Set Font Border using the text-shadow Property

The text-shadow property is actually used to set a text shadow around the text. But, if we do some manipulations, we can make it look more like the font borders.

The basic idea is to add a shadow effect on the fonts in each direction.

For example, if we want to add a 1px border around the fonts, we have to set a 1px shadow to the left, 1px shadow to the right, 1px shadow to the top, and the same 1px shadow to the bottom of the fonts.

If you do this, the text shadow will look more like a border and not the shadow.

In case you don’t know, the text-shadow property takes in four values the h-offset, v-offset, blur-radius, and the color of the shadow. We will keep the blur radius 0px so that it could look more like a font border.

Here is a working example that sets a black color 1px border around the fonts:

Example:

Set Font Border using the -webkit-text-stroke Property

In the previous method, we added a shadow to the text and made it look exactly like a real font border. But that’s not the only way of doing it.

We can also do the same thing with the text-stroke property which is specially introduced to set the font borders. However, the text-stroke property isn’t a part of the CSS spec.

Therefore, we have to add the webkit prefix ahead of the text-stroke property to make it work in browsers like Chrome and Sarari. Now firefox does also support the text-stroke property with webkit .

In case you don’t know, webkit is a web browser rendering engine used by popular web browsers like Chrome and Safari.

The text-stroke property is a shorthand of the text-stroke-width and the text-stroke-color properties. So, if we want to add a 1px black color font border, we can use -webkit-text-stroke: 1px black; .

Here is a working example which sets a 1px wide black color font border:

Example:

Related posts:

Источник

Html font white text with black border

Something like this could do the trick: If you’d prefer to use a shape in the background, you can tweak your box like so: Solution 3: What you can do is create one layer under text with pseudo-element and use linear-gradient as background on that element. Solution 1: I think you’re looking for text shadow.

White border around text covers background color

Have you tried assigning a specific background-color on these elements?

background-color : transparent; 

on the child elements of #menu

This is how the ‘printed’ pdf looks like for me:

Black text — white when on black background, Here is a really cool algorithm that automatically chooses the most legible text color based on background. You can use this example in your game loop when you draw the frames and texts. var c = document.getElementById (‘container’); var colourIsLight = function (r, g, b) < // Counting the perceptive …

Getting black border on white text possible?

One possible solution is to use QML to create that effect, and for you to use it with classic widgets you should use QQuickWidget as shown below:

import QtQuick 2.9 import QtQuick.Controls 2.4 Button < id: control property color color: "white" property color _color: down ? Qt.lighter(color, 1.1): color property color light_color: Qt.lighter(control._color, 1.1) property color dark_color: Qt.darker(control._color, 1.1) contentItem: Text < text: control.text font: control.font color: "white" style: Text.Outline styleColor: "black" horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter >background: Rectangle < opacity: enabled ? 1 : 0.3 border.width: 0.7 border.color: "gray" radius: 2 gradient: Gradient < GradientStop < position: 0 ; color: control.pressed ? control._color : control.light_color >GradientStop < position: 1 ; color: control.pressed ? control.dark_color : control._color >> > onClicked: obj.clicked() > 

from PyQt5 import QtCore, QtGui, QtWidgets, QtQuickWidgets class ButtonQMl(QtQuickWidgets.QQuickWidget): clicked = QtCore.pyqtSignal() def __init__(self, parent=None): super(ButtonQMl, self).__init__(parent) self.setSource(QtCore.QUrl.fromLocalFile("main.qml")) self.setResizeMode(QtQuickWidgets.QQuickWidget.SizeRootObjectToView) self.setSizePolicy(QtWidgets.QSizePolicy.Minimum, QtWidgets.QSizePolicy.Fixed) self.engine().rootContext().setContextProperty("obj", self) self.setFixedHeight(50) def text(self): return self.rootObject().property("text") if self.rootObject() else "" def setText(self, text): if self.rootObject() and self.text() != text: self.rootObject().setProperty("text", text) def color(self): return self.rootObject().property("color") if self.rootObject() else "" def setColor(self, color): color = QtGui.QColor(color) if self.rootObject() and self.color() != color: self.rootObject().setProperty("color", color) def font(self): return self.rootObject().property("font") if self.rootObject() else "" def setFont(self, font): if self.rootObject() and self.font() != font: self.rootObject().setProperty("font", font) class MyButton(ButtonQMl): def __init__(self, parent=None): super(MyButton, self).__init__(parent) self.clicked.connect(self.change_color) self.setupFont() def change_color(self): color = QtWidgets.QColorDialog.getColor() if color.isValid(): self.setColor(color) def setupFont(self): fnt = self.font() fnt.setFamily('Palatino') fnt.setPointSize(20) self.setFont(fnt) def mousePressEvent(self, event): print("event: ", event) super(MyButton, self).mousePressEvent(event) if __name__ == '__main__': import sys app = QtWidgets.QApplication(sys.argv) w = QtWidgets.QWidget() lay = QtWidgets.QVBoxLayout(w) btn1 = MyButton() btn1.setText("Hello World"); btn1.setColor(QtCore.Qt.yellow) btn2 = QtWidgets.QPushButton("Click me") btn2.setFixedHeight(50) btn2.setStyleSheet("color: white; background-color: yellow") lay.addWidget(btn1) lay.addWidget(btn2) w.show() sys.exit(app.exec_()) 

Html — How to change Text color in Div without changing, When you use a shorthand property, such as border, all the unspecified properties are set to their default (initial) value. In this case, the default border-color is currentColor, which picks up whatever the current color is—in this case white.You can solve this problem by either explicitly specifying the color in …

How to change text from black to white upon hover on background black?

.bg-cover span < z-index: 10; color: #333; >.fishing:hover .bg-cover span

and remove the inline color for the fishing text

jsfiddle http://jsfiddle.net/Drea/vsnxbw0q/

div.bg-cover + span < /* normal styles for span-text */ >div.bg-cover:hover + span < /* styles for span-text when hovering div.bg-cover */ >

lets you manipulate the following ( and only that ) span-element, and if you make its style dependant on wether or not your .bg-cover element is hovered over, you should get the results that you want.

Text opacity with black background [duplicate]

I think you’re looking for text shadow.

text-shadow: 0 0 10px #000000; 

I’d recommend you read about text-shadow over at CSS Tricks. Something like this could do the trick:

text-shadow: rbga(0, 0, 0, .5) 2px 2px 1px; /* color, x pos, y pos, blur */ 

If you’d prefer to use a shape in the background, you can tweak your box like so:

background-color: rgba(0, 0, 0, .5); /* 50% opacity black background will keep your text fully opaque */ border-radius: 10px; /* round out the corners of your shape */ 

What you can do is create one layer under text with :after pseudo-element and use linear-gradient as background on that element. Note that you need to create stacking-context so you can set z-index

Источник

How to add a black border around text css

how to add a black border around text css Solution 1: You can use and then Solution 2: Unfortunately there is not any easy way to do this and support multiple browsers. HTML: CSS: Demo: https://jsfiddle.net/jcmorris/m2a3Lrxv/1/ Solution 2: Nevermind, i figured it out, i had to put the inline-block on the spans inside the div instead of the div itself Solution 3: HTML CSS

How to add a black border around text css

Making my text white with a black CSS background, Like @link2pk suggested, adding color: #ffffff; to body in your CSS will make text white by default. I also added same color modification on navigation links using nav a because blue is hard to read on black background but that’s really all up to you. body < background-color: #101010; color: #ffffff; >h1 < color: #ffffff; …

‘Text Border’ Decoration in CSS [duplicate]

Unfortunately there is not any easy way to do this and support multiple browsers. Webkit supports the css tag -webkit-text-stroke but that leaves out Firefox and IE (amongst others)

“how to add a black border around text css” Code Answer, css border color use text color. neon green font color with text-border css. text white border. no border b/w text and css block. set border to text css. html make text with a black border around. text color border css. css text white border. text with black border css.

How to have a bordered text in tailwind

Two ways to do that for you case.

1. you change the div to an inline element or
2. you wrap the text with a inline element. e.g span

How to border a text using Bootstrap?, It should look like a centered box with border and the text should be centered within. I attach an IMG showing the exact thing I’m looking for. I think I’d be able to do it in CSS but my tutor said it’s Bootstrap doable. I couldn’t find it in the documentation however, tried to search using «bordered text», «text in box» etc. …

How to make div border wrap around text, but still be block?

You have to float the containing divs left and right, and then clear each one.

 
>
 
Message from 1
 
Message 1
 
 
 
Message from 2
 
Message 2