So basically, I am trying to add a border to an image and screenshot it using img-kit via python3. I applied a border-radius and an actual border. However, the border appears inside the image, not around the object.
Here's how it looks;
I tried some examples from stack overflow like adding padding or margin but it didn't work.
<!DOCTYPE html>
<html>
<head>
<title>Profiles | Nekotony</title>
<style>
@font-face {
font-family: 'keepcalm';
src: url('/home/alice-bot/storage/KeepCalm-Medium.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
body {
background-color: #1C1C1C;
}
.profiles {
background: url("https://i.imgur.com/0Hl2D6w.jpg") no-repeat;
background-size: 100%;
width: 1650px;
height: 500px;
background-color: #1C1C1C;
position: fixed;
}
* {
margin: 0; padding: 0; box-sizing: border-box;
font-family: 'keepcalm', Fallback, sans-serif;
}
.img {
margin-top: 25px;
margin-left: 25px;
width: 450px;
height: 450px;
border-width: 5px;
border-color: #000000;
border-style: solid;
border-radius: 250px;
}
</style>
<meta content="text/html; charset=utf-8" http-equiv="Content-type">
<meta content="png" name="imgkit-format">
</head>
<body>
<div class="profiles">
<img class="img" src="https://i.imgur.com/X2XG1tU.png">
</div>
</body>
</html>
import imgkit
import jinja2
import string
def final_image(self, user):
html = self.render_template('final.html')
by = imgkit.from_string(str(html), False, options={"width": 1650,"height": 820,"crop-w" : 1650})
return by
def render_template(self, file_name,**context):
return jinja2.Environment(loader=jinja2.FileSystemLoader('/home/alice-bot/storage/')).get_template(file_name).render(context)
